JQuery переключения класса с несколькими вариантами

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

Самое лучшее, может быть, не использовать toggleClass

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

}); 

Answer 4

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 5

Вы можете проверить класс диапазона, а затем удалить его.

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