How to get the data-id attribute?
我正在使用jQuery quicksand插件。 我需要获取所单击项的data-id并将其传递给webservice。
如何获取data-id属性? 我正在使用
1 2 3 4 | $("#list li").on('click', function() { // ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError); alert($(this).attr("#data-id")); }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> <ul id="list" class="grid"> <li data-id="id-40" class="win"> <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" /> </li> </ul> |
要获取属性
1 | $(this).attr("data-id") // will return the string"123" |
或
1 | $(this).data("id") // will return the number 123 |
并且
如果我们想使用现有的原生JavaScript检索或更新这些属性,那么我们可以使用getAttribute和setAttribute方法来实现,如下所示:
通过JavaScript
1 2 3 4 5 6 | // 'Getting' data-attributes using getAttribute var plant = document.getElementById('strawberry-plant'); var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12' // 'Setting' data-attributes using setAttribute plant.setAttribute('data-fruit','7'); // Pesky birds |
通过jQuery
1 2 3 4 5 6 7 8 9 10 | // Fetching data var fruitCount = $(this).data('fruit'); OR // If you updated the value, you will need to use below code to fetch new value // otherwise above gives the old value which is intially set. // And also above does not work in ***Firefox***, so use below code to fetch value var fruitCount = $(this).attr('data-fruit'); // Assigning data $(this).attr('data-fruit','7'); |
阅读此文档
重要的提示。请记住,如果您通过JavaScript动态调整
1 | link |
JS:
1 2 3 4 5 | $(this).data("id") // returns 123 $(this).attr("data-id","321"); //change the attribute $(this).data("id") // STILL returns 123!!! $(this).data("id","321") $(this).data("id") // NOW we have 321 |
如果您不关心旧的IE浏览器,也可以使用HTML5数据集API
HTML
1 | My Awesome Div |
JS
1 2 3 4 | var myDiv = document.querySelector('#my-div'); myDiv.dataset.info //"some info here" myDiv.dataset.otherInfo //"more info here" |
演示:http://html5demos.com/dataset
完整的浏览器支持列表:http://caniuse.com/#feat=dataset
惊讶没人提到:
1 2 3 4 5 6 7 8 9 10 | <select id="selectVehicle"> <option value="1" data-year="2011">Mazda</option> <option value="2" data-year="2015">Honda</option> <option value="3" data-year="2008">Mercedes</option> <option value="4" data-year="2005">Toyota</option> </select> $("#selectVehicle").change(function () { alert($(this).find(':selected').data("year")); }); |
以下是工作示例:https://jsfiddle.net/ed5axgvk/1/
HTML
1 | <span id="spanTest" data-value="50">test</span> |
JS
1 | $(this).data().value; |
要么
1 | $("span#spanTest").data().value; |
ANS : 50
适合我!
1 | var id = $(this).dataset.id |
适合我!
我使用$ .data - http://api.jquery.com/jquery.data/
1 2 3 4 5 | //Set value 7 to data-id $.data(this, 'id', 7); //Get value from data-id alert( $(this).data("id") ); // => outputs 7 |
使用自己的
1 2 3 | function myFunction(){ alert($("#button1").data("sample-id")); } |
1 2 3 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button> |
这段代码将返回数据属性的值,例如:data-id,data-time,data-name等。,我已经为id显示了
1 | Click |
JS:
1 | $(this).data("id"); |
//获取data-id - > a1的值
1 | $(this).data("id","a2"); |
//这将改变data-id - > a2
1 | $(this).data("id"); |
//获取data-id - > a2的值
使用jQuery:
1 2 3 4 | $(".myClass" ).load(function() { var myId = $(this).data("id"); $('.myClass').attr('id', myId); }); |
对于那些希望动态删除并重新启用工具提示的人,可以使用