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>