jQuery在点击时切换多个类

时间:2016-05-19 16:14:59

标签: jquery toggle toggleclass

为什么我无法使用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 twitter元素的所有类,我想要发生的是附加其中一个点击的类并删除其他类,但保留原文。

1 个答案:

答案 0 :(得分:0)

您可以尝试添加额外的类和ID:

&#13;
&#13;
$(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.
  });

});
&#13;
<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>
&#13;
&#13;
&#13;