خاصیت data-attribute در Html چیست و چه کاربردی دارد ؟

data-attribute در Html چیست و چه کاربردی دارد

ببینید خیلی ساده بخوام بگم از data-attribute ها برای موارد زیر در Html استفاده می شه.

• از data-attribute ها برای نگهداری اطلاعات اضافی و یا اطلاعات کاستوم شده برای صفحات و یا اپلیکیشن ها استفاده میشه.
• توسط این خاصیت شما می تونید ویژگیهای خاصی رو به تگ های صفحه اضافه کنید. به عنوان مثال فرض کنید لیستی از اطلاعات دارید که در هر بار اجرای حلقه یک div ایجاد می شود. شما می خواهید هر div یک مشخصه مخصوص به خود را داشته باشد. در این موارد می توانید از data-attribute استفاده کنید.
• اطلاعات ذخیره شده در data-* ها رو میتونید بدون رفرش شدن صفحه و یا بدون استفاده از Ajax توسط جی کوئری استفاده کنید.
• خاصیت data-attribute از دو بخش تشکیل شده است. بخش اول کلمه data- و بخش دوم یک کلمه دلخواه مثلا data-click

برای اینکه این موضوع بهتر براتون جا بیفته یک مثال میزنم که از Asp.net Core استفاده شده. البته کدها Html و جی کوئری هستن. فرض کنید لیستی از محصولات را در یک فروشگاه اینترنتی نمایش می دهیم. زیر هر محصول یک دکمه "خرید" وجود دارد. با زدن این دکمه باید محصول به سبد خرید اضافه شود. خب چیزی مشابه کد زیر را خواهیم داشت :

@foreach (var item in Model)
{
   <a href="#" class="catget" data-id="@item.ProductID">
      سبد خرید
   </a>
}

خب در مثال بالا در حلقه به تعداد کالاها دکمه سبد خرید نمایش داده خواهد شد. حالا ما باید تشخیص دهیم کاربر روی کدام دکمه کلیک کرده است. همانطور که می بینید data-id در تگ a مقدار Id کالا را در خود نگهداری می کند و باعث میشود هر تگ a یک خاصیت منحصر بفرد داشته باشد.

دریافت مقدار data-attribute توسط دستورات جاوااسکریپت

خب حالا توسط دستور زیر می تونیم مقدار هر data-ProductID رو داشته باشیم و ازش استفاده کنیم.

<script>
   $(".catget").on('click', function (e) {
      e.preventDefault();
      alert($(this).data("ProductID"));
   })
</script>