jquery - 使用 data- 属性在单击时添加或删除类

Question

这里有简单的 jquery 单击切换功能，但由于我的知识和经验有限，我需要一些指导。

我有一组带有共享 boxedBgSwitch 类的按钮，每个按钮都有一个唯一的 data-id。我想在单击时将 data-id 作为一个类分配给文档的 body，并且一次只能分配一个类。下面的代码适用于分配类，但在添加新类之前它不会删除先前添加的类。推荐的方法是什么？

jQuery

  $('.boxedBgSwitch').on('click', function(e){
    e.preventDefault();
    var bgClass = $(this).data("id");
    $('body').toggleClass(bgClass);
  });

HTML

  <button data-id="bg-blue" class="boxedBgSwitch color-box"></button>
  <button data-id="bg-yellow" class="boxedBgSwitch color-box"></button>
  <button data-id="bg-red" class="boxedBgSwitch color-box"></button>
  <button data-id="bg-orange" class="boxedBgSwitch color-box"></button>
  <button data-id="bg-green" class="boxedBgSwitch color-box"></button>

显然，我是 jQuery 新手...似乎应该有一个用于此目的的 addOrRemoveClass 方法。也许有一个等价物？

Answer 1

嗯，我能想到的一个非常基本的解决方案是将最后应用的类存储在变量中，然后在应用新类之前将其删除。沿着这条线的东西:

var lastBg = "";

$('.boxedBgSwitch').on('click', function (e) {
    e.preventDefault();
    var bgClass = $(this).data("id");
    $('body').removeClass(lastBg).addClass(bgClass);
    lastBg = bgClass;
});

不能说这是最好的解决方案，但它似乎工作可靠，即使您开始更改类名称也不会中断。这是 JSFiddle用行动来证明它。希望这可以帮助!如果您有任何疑问，请告诉我。