如何在每个叮当声中在外部div上添加然后删除类

Question

如果li a id项与div项的类别匹配，则希望在每次点击时添加一个class “ theme”。

如果li a id项与div项的类不匹配，则要从不匹配的div中删除“主题”类。

但是，它只会在每次点击时添加课程，而不会删除课程。 有什么建议么？

<ul class="funding-theme">   
  <li data-rel="all"><a class="sub active" id="all" href="javascript:void(0)">All</a></li>
  <li><a class="sub" id="education" href="javascript:void(0)">Education</a></li>
  <li><a class="sub" id="healthcare" href="javascript:void(0)">Healthcare</a></li>
  <li><a class="sub" id="justice" href="javascript:void(0)">Justice</a></li>
</ul>

<div class="list left">
  <div class="non_profit all education"></div>
  <div class="non_profit all education"></div>
  <div class="non_profit all justice"></div>
  <div class="non_profit all healthcare"></div>
</div>

<script>

  var $sub  = $(".sub");

  $sub.click(function(e){

    if (e.target.id == "all") {
      //alert("#" + $(this).attr('id') + "");

      $("."+$(this).attr('id')).removeClass('theme');
    } else if (e.target.id == $(this).attr('id')) {
      alert("#" + $(this).attr('id') + "");

      $("."+$(this).attr('id')).removeClass('theme');
      $("."+$(this).attr('id')).addClass('theme');
    }
  });

</script>

Answer 1

尝试这个

$('.sub').click(function (e) {
var id = ($(this).attr("id"));    
    $('.list').find('div').each(function(){
        if($(this).hasClass(id))
        {            $(this).addClass('theme');
        }else
        {
            $(this).removeClass('theme');
        }
    });
});

小提琴演示

Answer 2

尝试这个：

var $sub  = $(".sub");

$sub.click(function(e){

if (e.target.id == "all") {
  //alert("#" + $(this).attr('id') + "");

  $(".theme").removeClass('theme');
} else if (e.target.id == $(this).attr('id')) {
  alert("#" + $(this).attr('id') + "");

  $(".theme").removeClass('theme');
  $("."+$(this).attr('id')).addClass('theme');
}});

工作演示

Answer 3

如果我做对了，则需要更改以下几行：

 $("."+$(this).attr('id')).removeClass('theme');
 $("."+$(this).attr('id')).addClass('theme');

至

$(".all").removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');