具有多个选项的jQuery切换类

在这种情况下，如何使用toggleCalss（）：

<div id="options"> 
  <span data-color="red">red</span> 
  <span data-color="green">green</span> 
  <span data-color="blue">blue</span> 
  <span data-color="black">black</span> 
</div>

<div id="target"> 
  <span class="icon home">target</span> 
</div>

$('#options').on('click', 'span', function () {
   var $iclass= $(this).data('color');
   $('#target').find('span').toggleClass($iclass)

});

红色
绿色
蓝色
黑色
目标
$（'#选项'）。在（'click'，'span'，function（）{
var$iclass=$（this.data（'color'）；
$（'#target'）.find（'span'）.toggleClass（$iclass）
});

---

在上面的示例中，现有类不会被单击的类替换。它只是不断附加额外的类。这里还有一个JSFIDLE示例：

这就是toggleClass的工作原理

这里一个可能的解决方案是-我假设您必须保留类

home图标

var $tspan = $('#target').find('span'),
    tsclazz = $tspan.attr('class');
$('#options').on('click', 'span', function () {
    var $iclass = $(this).data('color');
    $('#target').find('span').attr('class', tsclazz + ' ' + $iclass)
});

---

演示：

最好不要使用toggleClass

$('#options').on('click', 'span', function () {
    var $iclass= $(this).data('color');
    $('#target').find('span').removeClass();
    $('#target').find('span').addClass($iclass);

});

---

您可以检查span类，然后将其删除

$('#options').on('click', 'span', function () {
    var $iclass = $(this).data('color');
    var elem = $('#target').find('span')
    if (elem.hasClass($iclass)) {
        elem.removeClass($iclass);
    } else {
        elem.removeClass().addClass("icon home " + $iclass)
    }
});

---

因此，如果我先单击红色，然后单击绿色，跨度应该有类：icon、home和green？如果他真的想切换这些类，这将不起作用。例如，两次单击蓝色不会在第二次单击时将其删除。

$('#options').on('click', 'span', function () {
    var $iclass = $(this).data('color');
    var elem = $('#target').find('span')
    if (elem.hasClass($iclass)) {
        elem.removeClass($iclass);
    } else {
        elem.removeClass().addClass("icon home " + $iclass)
    }
});

$('#options').on('click', 'span', function () {
    var r = $(this).siblings().map(function () {
        return this.getAttribute('data-color');
    }).get().join(' ');

    var t = this.getAttribute('data-color');

    $('#target').find('span').removeClass(r).toggleClass(t);
});