如何在每個叮當聲中在外部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');