如何使用Jquery的单击功能获取属性的值？

Question

我对自己的代码有疑问；为什么当我单击第二个表行时，属性的第一个值是警报。

例如， 在第一表行中，我的属性值为“ 30”，第二属性值为31，所以当我单击第二表行时，显示的是第一表行的值，而不是第二行的值。

这是我的代码。 首先，我需要将响应附加到表中，所以我在这里：

 $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");

所以，现在我想获取“ data-attribute-chain-id”每个属性的值

我在这里有代码：

    $('#edit_chainingBuild').on('click','tr.clickable-row',function(e){


      $('table#edit_chainingBuild tr').removeClass('selected');
      $(this).addClass('selected');

      var find_each_id_will_update = $('.data-attribute-chain-id').attr('data-attribute-chain-id');
      alert(find_each_id_will_update);

      $('#EditcondimentsBuilderModal').modal('show');


});

Answer 1

在您的以下代码中：

var find_each_id_will_update = $('.data-attribute-chain-id').attr('data-attribute-chain-id');

您正在按类“ data-attribute-chain-id”找到一个元素，该元素将返回dom中的第一个元素。取而代之的是，您需要在点击的行中获取具有相同类'data-attribute-chain-id'的元素。

var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');

或

var find_each_id_will_update = $(this).children('.data-attribute-chain-id').attr('data-attribute-chain-id');

Answer 2

@Vishal Bhavsar的回答很好。

如果情况允许，为何不将data-attribute-chain-id移至<tr>

$('#edit_chainingBuild').append("<tr data-attribute-chain-id=" + menu_builder_details_id + " class='clickable-row'><td>...</td></tr>");

然后

$('#edit_chainingBuild').on('click','tr.clickable-row',function(e){
    alert($(this).attr('data-attribute-chain-id'));
});