在单击按钮上放置和移除背景色

Question

我对这段代码有问题，因为它能工作。好吧，部分。我的想法是更改用户单击的按钮的背景色，但是数据线属性只增加一次，而更改背景色只增加一次。(它输入else并将数据行值从0更改为1，但我的想法是进一步增加它的值，然后通过总结值是奇数还是偶数删除或添加bg危险类)。所有按钮(全部带有trashCan类)最初都具有值为零和中性背景色的数据线属性。这个代码有什么问题？

$(".trashCan").click(function(){
        let trashCan = $(this);
        let trash = parseInt(trashCan.data('line'))+1;
        trashCan.attr('data-line',trash);
        if(trash%2==0){
          trashCan.removeClass("bg-danger");
        }
        else {
          trashCan.addClass("bg-danger");
        }
      });

Answer 1

这个问题是因为您访问data-line属性时混合了attr()和data()。前者从DOM读取，后者从jQuery的内部缓存读取。如果使用其中之一获得值，还需要使用相同的方法设置值。

在下面的示例中，我修改了逻辑，使其只使用data()，这在可能的情况下是首选。如果您一定要更新DOM，那么应该使用attr()。

​

$(".trashCan").click(function() {
  let trashCan = $(this);
  let trash = parseInt(trashCan.data('line')) + 1;
  trashCan.data('line', trash);
  
  if (trash % 2 == 0) {
    trashCan.removeClass("bg-danger");
  } else {
    trashCan.addClass("bg-danger");
  }
});

.trashCan {
  background-color: #CCC;
  color: #000;
  border-radius: 5px;
  padding: 10px 30px;
  border: 0;
}   

.trashCan.bg-danger {
  background-color: #C00;
  color: #FFF
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="trashCan" data-line="0">Trash</button>

​

但是，值得注意的是，这种逻辑是不必要的。您的目标似乎只是在连续单击时切换类，在这种情况下，只需使用toggleClass()并完全删除data属性：

​

$(".trashCan").click(function() {
  $(this).toggleClass('bg-danger');
});

.trashCan {
  background-color: #CCC;
  color: #000;
  border-radius: 5px;
  padding: 10px 30px;
  border: 0;
}   

.trashCan.bg-danger {
  background-color: #C00;
  color: #FFF
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="trashCan">Trash</button>

​