Question

如何使用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)

});

在上面的示例中，现有的类不会被单击的类替换。它只是附加额外的类。以下是jsfiddle示例：http://jsfiddle.net/5UbuD/3/

Answer 1

$('#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);
});

http://jsfiddle.net/z7hUM/

Answer 2

这就是toggleClass的工作原理。

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

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)
});

演示：Fiddle

Answer 3

http://jsfiddle.net/5UbuD/12/

$('#options').on('click', 'span', function () {
   var $iclass= $(this).data('color');
    var target = $('#target').find('span');
    // toggle class
    $iclass = target.hasClass($iclass) ? "" : $iclass;
   target.removeClass().addClass("icon home " +$iclass)

});

Answer 4

您可以检查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)
    }
});

DEMO

Answer 5

最好的可能是不使用toggleClass

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

});

jQuery切换类有多个选项

5 个答案: