Question

我正在尝试找到一个具有匹配'tr'值的data-title元素，并为该元素设置data-qty值。

这就是我想要做的：

var menu_type = data.type;

switch (menu_type) {
  case 'breakfast':
    var menu_selector = '#breakfast-form';
    break;
  case 'snacks':
    var menu_selector = '#snacks-form';
    break;
  default:
    var menu_selector = '#breakfast-form';
}

for (var key in data.order) {
  if (data.order.hasOwnProperty(key)) {
    var find_row = $(menu_selector).find('tr[data-title="' + key + '"]').data('qty', data.order[key]);
  }
}
console.log(data);

data.order是带有{Coffee: "1"}的数组对象。

这是我的<tr> html：

<div id="breakfast-form">
  <table class="orderTable">
    <tbody>
      <tr data-qty="9" data-title="Coffee">
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

我要去哪里错了？

Answer 1

数据属性和数据属性之间存在差异。

HTML标记属性用于在解析时设置DOM元素属性。
并且.data()方法直接访问该属性。

从documentation：«数据属性在第一次访问data属性时被提取，然后不再被访问或突变»

运行下面的代码片段并检查标记。

setInterval(function(){
  
  var count = $("#test").data("count");
  console.log(count);
  
  count++;
  $("#test").data("count",count);
  
},1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" data-count="0">Test div</div>

如果要“查看”标记中的更改，则必须使用.attr("data-whatever", "new value");更新标记属性。

现在检查下面的代码段。

setInterval(function(){
  
  var count = $("#test").attr("data-count");
  console.log(count);
  
  count++;
  $("#test").attr("data-count",count);
  
},1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" data-count="0">Test div</div>

请注意，坚持“查看”标记更新是有效率的。

Answer 2

我认为这就是您要寻找的。如果要为元素分配.attr属性，则需要使用.data和data。

var selectors = {
  breakfast: '#breakfast-form',
  snacks: '#snacks-form'
};

function test(data) {
  var menuType = data.type,
      cssSelector = selectors[menuType || selectors.breakfast],
      menu = $(cssSelector);

  for(var key in data.order){
    menu.find('tr[data-title="' + key + '"]').attr('data-qty', data.order[key]);
  }  
}

test({
  type: 'breakfast',
  order: {
    Coffee: "1"
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="breakfast-form">
  <table class="orderTable">
    <tbody>
      <tr data-qty="9" data-title="Coffee">
        <td>test</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

由于您提到 data.order是带有{Coffee: "1"} 的对象数组，因此，for循环中的键将返回数组的索引即0,1,2 ...

要解决此问题，您可以执行以下操作：

for(var index in data.order) {
   key =  Object.keys(data.order[index])[0];
   value =  Object.values(data.order[index])[0];
   if(data.order.hasOwnProperty(index)){
      var find_row = $(menu_selector).find('tr[data-title="'+key+'"]').attr('data-qty', value);
   }                   
}

您还使用.data而不是.attr

jQuery的数据属性集不起作用

3 个答案: