jQuery的数据属性集不起作用

Question

我试图找到一个具有匹配data-title值的'tr'元素，并为该元素设置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()方法直接访问该属性。

从文档中 ： «首次访问数据属性时将提取数据属性，然后不再对其进行访问或更改»

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

 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");更新标记属性.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

我认为这就是您要寻找的。 如果要为元素分配data属性，则需要使用.attr与.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