Question

如果id项的li a与div项的类匹配，则每次点击都要添加class“主题”。

如果id项的li a与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');
        }
    });
});

Fiddle Demo

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');
}});

<强> Working Demo

Answer 3

如果我做对了，你需要改变以下几行：

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

到

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

如何在每个碰撞上添加外部div上的删除类

3 个答案: