如何获得数据-id属性？

Question

如何获得数据-id属性？

我正在使用jQuery流沙插件。我需要获取单击项的数据id，并将其传递给webservice。如何获得数据-id属性？我用的是.on()方法重新绑定排序项的单击事件。

$("#list li").on('click', function() {

  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);

  alert($(this).attr("#data-id"));

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">

  <li data-id="id-40" class="win">

    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">

      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />

    </a>

  </li>

</ul>

Answer 1

如果我们想使用现有的本机属性检索或更新这些属性JavaScript，然后我们可以使用getAttribute和setAttribute方法这样做，如下所示：通过JavaScript<div&nbsp;id='strawberry-plant'&nbsp;data-fruit='12'></div><script>//&nbsp;'Getting'&nbsp;data-attributes&nbsp;using&nbsp;getAttributevar&nbsp;plant&nbsp;=&nbsp;document.getElementById ('strawberry-plant');var&nbsp;fruitCount&nbsp;=&nbsp;plant.getAttribute('data-fruit');&nbsp;//&nbsp;fruitCount&nbsp;=&nbsp;'12' //&nbsp;'Setting'&nbsp;data-attributes&nbsp;using&nbsp;setAttributeplant.setAttribute('data-fruit','7');&nbsp;//&nbsp;Pesky&nbsp;birds</script>通过jQuery//&nbsp;Fetching&nbsp;datavar&nbsp;fruitCount&nbsp;=&nbsp;$(this).data('fruit');OR&nbsp; //&nbsp;If&nbsp;you&nbsp;updated&nbsp;the&nbsp;value,&nbsp;you&nbsp;will&nbsp;need&nbsp;to&nbsp;use&nbsp;below&nbsp;code&nbsp;to&nbsp;fetch&nbsp;new&nbsp;value&nbsp;//&nbsp;otherwise&nbsp;above&nbsp;gives&nbsp;the&nbsp;old&nbsp;value&nbsp;which&nbsp;is&nbsp;intially&nbsp;set. //&nbsp;And&nbsp;also&nbsp;above&nbsp;does&nbsp;not&nbsp;work&nbsp;in&nbsp;***Firefox***,&nbsp;so&nbsp;use&nbsp;below&nbsp;code&nbsp;to&nbsp;fetch&nbsp;valuevar&nbsp;fruitCount&nbsp;=&nbsp;$(this).attr('data-fruit'); //&nbsp;Assigning&nbsp;data$(this).attr('data-fruit','7');阅读本文档

Answer 2

重要的注意事项。请记住，如果您调整data-&nbsp;属性动态地通过JavaScript，它将不会反映在data()jQuery函数你必须通过data()功能也一样。<a&nbsp;data-id="123">link</a>联署材料：$(this).data("id")&nbsp;//&nbsp;returns&nbsp;123$(this).attr("data-id",&nbsp;"321");&nbsp;//change&nbsp;the&nbsp;attribute$(this).data("id")&nbsp; //&nbsp;STILL&nbsp;returns&nbsp;123!!!$(this).data("id",&nbsp;"321")$(this).data("id")&nbsp;//&nbsp;NOW&nbsp;we&nbsp;have&nbsp;321