时间戳

首页 > 解决方案 > 从按钮单击时放置和删除背景颜色

javascript - 从按钮单击时放置和删除背景颜色

问题描述

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

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

标签： javascriptjqueryclick

解决方案

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

在下面的示例中，我修改了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>

推荐阅读