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

Question

Почему я не могу переключать несколько классов, используя OnClick событие, как:

<a data-class="tiny"> Tiny</a> 
<a data-class="small"> Small</a> 
<a data-class="big"> Big</a> 
<a data-class="large"> Large</a> 


<i class="icon twitter"></i> 


    $(document).on('click', 'a[data-class]', function() { 
     var aclass = $(this).data('class'); 
     $(.box).toggleClass(aclass); 
    }); 

На каждый клик я в конечном итоге со всеми классами, присвоенных .Icon твиттер элемент, WHT я бы например, добавить один из выбранных классов и удалить другие, но сохранить оригинал.

Answer 1

Вы можете попробовать это добавить дополнительные классы и ID:

$(document).ready(function(){ 
 

 
    $(".linkClass").click(function(){ 
 
    var temp = $(this).id; // contains either tiny, small, big or large 
 

 
    $(".icon").removeClass("tiny small big large"); // clear any classes added before 
 
    $(".icon").addClass(temp); // adds the required class based on the id of the clicked element. 
 
    }); 
 

 
});

<a class="linkClass" id="tiny"> Tiny</a> 
 
<a class="linkClass" id="small"> Small</a> 
 
<a class="linkClass" id="big"> Big</a> 
 
<a class="linkClass" id="large"> Large</a> 
 

 

 
<i class="icon twitter"></i>