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

有多个问题

假设您尝试更改类body的元素类，而不是body元素本身的类
ul应该有li作为孩子，button不能成为ul元素的直接孩子

泰

$('.boxedBgSwitch').on('click', function (e) {
    e.preventDefault();
    var bgClass = $(this).data("id");
    $('.body').attr('class', function (i, clazz) {
        return (clazz || '').replace(/bg-.*?(\s|$)/, '') + ' ' + bgClass;
    });
});

演示：Fiddle

Answer 2

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

var lastBg = "";

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

不能说这是最好的解决方案，但它似乎可靠地工作，即使你开始更改类名也不会破坏。这是一个JSFiddle来展示它的实际效果。希望这可以帮助！如果您有任何问题，请告诉我。

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

2 个答案: