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中所述

对于元素的前五个字符是字符串“

-”并且其余字符(如果有)不包括任何大写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>

​