单击按钮放置和删除背景颜色

Question

我对这段代码有疑问，因为它有效。嗯，部分。我的想法是更改用户单击的按钮的背景颜色，但数据行属性仅增加一次，并且仅更改一次背景颜色。（它进入 else 并将数据行值从 0 更改为 1，但我的想法是进一步增加其值，然后通过判断值是奇数还是偶数来删除或添加 bg-danger class）。所有按钮（全部带有 trashCan class）最初都具有值为零和中性背景颜色的数据行属性。这段代码有什么问题？

$(".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>

不过，值得注意的是，这个逻辑并不是必须的。您的目标似乎只是在连续点击时切换 class，在这种情况下只需使用 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>

单击按钮放置和删除背景颜色

Putting and removing background color on click from button

javascript

jquery

click