当孩子有活跃课堂时，文本过滤器将变为粗体

Question

单击标签链接时，.active 将添加到该特定标签。我希望当标签上存在 .active 时，p 会变成蓝色（.active 添加到 p 中）。

我成功地将 p 变成了蓝色。但是，当标签链接不活动时，我无法删除蓝色和 .active。

$('.tag').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
  $(this).data("clicks", !clicks);
});


$('.tag').click(function() {
  var numActive = $('.active').length
  if (numActive > 0) {
    $(this).closest('.wrap').find('.filter').addClass('active');
  } else {
    $(this).closest('.wrap').find('.filter').removeClass('active');
  }
})

.tag.active {
  color: red;
}

.filter.active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="wrap">
  <p class="filter">filter</p>
  <div class="tag-wrap">
    <a class="tag">tag 1</a>
    <a class="tag">tag 2</a>  
    <a class="tag">tag 3</a>
  </div>
</div>

Answer 1

您可以将逻辑合并到一键处理程序中，并使用

toggleClass

进行简化：

$('.tag').click(function() {
  $(this).toggleClass('active');
  updateFilter();
});

function updateFilter() {
  $('.filter').toggleClass('active', $('.tag.active').length > 0);
}

.tag.active {
  color: red;
}

.filter.active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="wrap">
  <p class="filter">filter</p>
  <div class="tag-wrap">
    <a class="tag">tag 1</a>
    <a class="tag">tag 2</a>  
    <a class="tag">tag 3</a>
  </div>
</div>