jquery - 如果元素没有特定类，如何使条件起作用，在我的例子中是 "active"？

Question

here is the picture我有很多元素:a、b、c、d、e、f 当我点击元素 b 时，我在这个上添加类“active”并在其他元素上删除该类，事实是检测到该类是事件的, 我希望背景根据元素变化 else 如果它没有我想放不同图片的类。

/*  on click on b */
$("#item-b").click(function() {

    $("#content-a,#content-c,#content-d,#content-e,#content-f").hide();
    $("#content-b").removeClass("hidden");
    $("#content-b").show();
    $("#item-b").addClass("active");
    event.preventDefault();


});

if ($("#item-b").hasClass("active")) {
    $('#img-b').attr('src', 'img/img-b-active.png'); /* change  icon*/
    $('.section-grey').css("background-image", "url(img/bg-ateliers-cuisine.png)"); /* changer background*/
    $('#btn-offre').css("background-color", "#ffbf4a"); /* changer bouton color*/
} else {
    alert("no class active"); /* I want to put another picture here*/
}

Answer 1

您可以结合使用 CSS 和 jQuery 来实现这一点。我建议您为元素(图标)添加一些通用类，以便您可以更轻松地选择它们。

您的 CSS 可以具有默认值，并且在您的 jQuery 条件中只需更改默认状态即可。默认是不活动的，在 jQuery 中只是在事件的情况下更改值。这是如果你想改变图像的 src。对于颜色和其他东西，您可以使用 CSS。只需在 .active 类下添加样式。

见下文

代码非常简单。如果您需要详细的解释，请告诉我。而且也许我没有正确理解你的问题。请在下面的评论中告诉我

$(".item").click(function(event) {

  const otherContent = $(this).siblings().children()
  const thisContent = $(this).children();
  event.preventDefault();
  
  otherContent.hide()
  $(thisContent).removeClass("hidden").show()
  $(this).addClass("active");
  $(this).siblings().removeClass('active')
  
  
  if (  $(this).is("#item-a")) {
  	// do stuff here
    thisContent.css('color', 'pink')
  } else if (  $(this).is("#item-b")) {
  	// do stuff here
    thisContent.css('color', 'green')
  } else if (  $(this).is("#item-c")) {
  	// do stuff here
    thisContent.css('color', 'purple')
  }
  
});

.item {
  /* no active class */
  background: red;
}

.item.active {
  /* with active class */
  background: blue;
}

.item > div {
  display: none;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item-a" class="item">
  iconA
  <div id="content-a">
    content A
  </div>
</div>
<div id="item-b" class="item">
  iconB
  <div id="content-b">
    content B
  </div>
</div>
<div id="item-c" class="item">
  iconC
  <div id="content-c">
    content C
  </div>
</div>