ترکیب بسیار جالب صفت data در HTML با جاوااسکریپت و جی کوئری

ترکیب بسیار جالب صفت data در HTML با جاوااسکریپت و جی کوئری

data در HTML می‌تواند، بسیار کاربردی و جالب باشد. هر میزان که توسعه‌دهندگان با ترفندها آشناتر باشند، کارشان آسان‌تر و حرفه‌ای‌تر خواهد بود.

به این مثال دقت کنید:

<ul>

 <li id=”budgie”>budgie</li>

 <li id=”salmon”>salmon</li>

</ul>

قصد دارم هر کس با کلیک بر هر یک از li ها این متن را در یک alert مشاهده کند:

The budgie is a bird.

The salmon is a fish.

باید این کار به‌صورت هوشمند انجام شود و نه به‌صورت دستی!

به این شکل یک تابع معرفی می‌کنم:

function showDetails(animal) {

 var animalType = animal.getAttribute(“data-animal-type”);

 alert(“The ” + animal.innerHTML + ” is a ” + animalType + “.”);

}

و به هرکدام از li ها یک صفت یا همان attribute که با data آغاز می‌شود معرفی می‌کنم (همان‌طور که می‌دانید: عبارت‌های بعد از دیتا کاملاً دل به خواهی هستند)، بدین شکل:

<ul>

 <li onclick=”showDetails(this)” id=”budgie” data-animal-type=”bird”>budgie</li>

.<li onclick=”showDetails(this)” id=”salmon” data-animal-type=”fish”>Salmon</li>

</ul>

اکنون با کلیک روی هرکدام از li ها، به‌صورت هوشمند این کار انجام می‌شود.

gt; <li class=”item” data-animal-type=”bird”>budgie</li> <li class=”item” data-animal-type=”fish”>Salmon</li> </ul>

$(function () {

 $(‘.item’).on(‘click’, function () {

 var $animal = $(this).data(‘animal-type’);

 var $name = $(this).text();

 alert(“The” + ” ” + $name + ” ” + “is a” + ” ” + $animal);

 });

});

 

پیروز و موفق باشید.

مهدی موسوی

منبع: دنشجویار