jQuery返回未定義的數據屬性

Question

如何從警報id_tarif_groupe上的data-idTarif獲取值？ 我已經嘗試過attr()和data()方法，但是它們都不起作用。

 $('.ddd').click(function(event) { var ID = $(this).attr('id'); }).change(function() { var ID = $(this).attr('id'); var tarifHT = $('#id_saddle_model_' + ID).val(); var id_tarif_groupe = $(this).data('idTarif'); alert(id_tarif_groupe + ' ' + tarifHT + ' ' + ID); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr bgcolor=#e0e0e0 id="108" class="ddd"> <td>ASG </td> <td><input type="text" value="" style="" id="id_saddle_model_108" data-idTarif="1"></td> <td><input type="text" value="3700.00" style="" id="id_saddle_model_108" data-idTarif="2"></td> <td id="l_108"></td> </tr> <tr bgcolor=#ffffff id="99" class="ddd"> <td>CEC </td> <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="1"></td> <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="2"></td> <td id="l_99"></td> </tr> </table> 

Answer 1

ddd元素沒有data ，這是您的錯誤

 $('.ddd input').change(function() { var id_saddle_model_ = $(this); var ID = id_saddle_model_.closest("tr").attr("id"); var tarifHT = id_saddle_model_.val(); var id_tarif_groupe = id_saddle_model_.attr('data-idTarif'); alert(id_tarif_groupe + ' ' + tarifHT + ' ' + ID); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr bgcolor=#e0e0e0 id="108" class="ddd"> <td>ASG </td> <td><input type="text" value="" style="" id="id_saddle_model_108" data-idTarif="1"></td> <td><input type="text" value="3700.00" style="" id="id_saddle_model_108" data-idTarif="2"></td> <td id="l_108"></td> </tr> <tr bgcolor=#ffffff id="99" class="ddd"> <td>CEC </td> <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="1"></td> <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="2"></td> <td id="l_99"></td> </tr> </table> 

Answer 2

this是指引發更改的元素。如果在警報中打印此元素，則會看到其引發事件的表格。

為了讓輸入字段的值，則需要更改this來input 。

如w3c標准中所述，它也必須是小寫字母： https : //www.w3.org/TR/html5/dom.html#dom-dataset

對於前五個字符為字符串“ data-”且其余字符（如果有）不包含任何大寫ASCII字母的元素上的每個內容屬性，請按以下順序在元素的屬性列表中列出這些屬性：要列出的“名稱/值”對，其名稱是屬性的名稱，其中前五個字符已刪除，其值是屬性的值。

 $('.ddd').click(function(event) { var ID = $(this).attr('id'); }).change(function() { var ID = $(this).attr('id'); var input = $('#id_saddle_model_' + ID); var tarifHT = input.val(); var id_tarif_groupe = input.data('idtarif'); alert(this + ':' + input + ':' + id_tarif_groupe + ' ' + tarifHT + ' ' + ID); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr bgcolor=#e0e0e0 id="108" class="ddd"> <td>ASG </td> <td><input type="text" value="" style="" id="id_saddle_model_108" data-idTarif="1"></td> <td><input type="text" value="3700.00" style="" id="id_saddle_model_108" data-idTarif="2"></td> <td id="l_108"></td> </tr> <tr bgcolor=#ffffff id="99" class="ddd"> <td>CEC </td> <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="1"></td> <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="2"></td> <td id="l_99"></td> </tr> </table>