What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Question

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it doesn't have the class, I want to display a different image.

/*  when clicking on item 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 image icon */
    $('.section-grey').css("background-image", "url(img/bg-ateliers-cuisine.png)"); /* change background */
    $('#btn-offre').css("background-color", "#ffbf4a"); /* change button color */
} else {
    alert("No active class found"); /* Display another image here */
}

jquery html css onclick

Answer 1

Answer №1

To achieve the desired outcome, you can utilize a mix of CSS and jQuery. It is recommended to assign common classes to the items (icons) for easier selection.

By setting default values in your CSS and altering them in jQuery conditionals, you can toggle between states. For example, changing the src of an image can be done using jQuery while colors and styles can be adjusted using CSS under the .active class.

Refer to the sample code provided below. If you require a more detailed explanation or if there are any misunderstandings, feel free to mention them in the comments section.

$(".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>

Answer 2

To achieve the desired outcome, you can utilize a mix of CSS and jQuery. It is recommended to assign common classes to the items (icons) for easier selection.

By setting default values in your CSS and altering them in jQuery conditionals, you can toggle between states. For example, changing the src of an image can be done using jQuery while colors and styles can be adjusted using CSS under the .active class.

Refer to the sample code provided below. If you require a more detailed explanation or if there are any misunderstandings, feel free to mention them in the comments section.

$(".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>

Answer 3

Answer №2

For scenarios where there is no specific class present, you can implement a condition or add a class as needed. Refer to the code snippet below for guidance.

This issue is elucidated using jQuery and CSS.

$('.det').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
})

.active{
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="det">click here again and again</div>

<div class='det'>click here again and again</div>

Answer 4

For scenarios where there is no specific class present, you can implement a condition or add a class as needed. Refer to the code snippet below for guidance.

This issue is elucidated using jQuery and CSS.

$('.det').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
})

.active{
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="det">click here again and again</div>

<div class='det'>click here again and again</div>

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Answer №1

Answer №2

Similar questions

The difference between using an event listener directly in HTML vs. using the add

Troubleshooting: Issue with Ajax Post Request in Django Version 1.10.5

Determine the remaining load time in PHP after submitting a task

Using Jquery variables for calculations and they do not work with numerical values

Centered Tailwind CSS logo design

Leveraging the power of Google Closure Templates alongside the versatility of

Storing a JSON object within a data attribute in HTML using jQuery

What is the best way to display content at a specific time using Angular?

Is the hover rotation feature not functioning properly?

CakePHP allows developers to easily include images in their links using the `$this->Html->link` method. However, instead of generating HTML code for the image, it outputs ASCII characters

Problems with displaying Wordpress content on your web browser

Is it possible to utilize :not in this scenario?

Utilizing MUI for layering components vertically: A step-by-step guide

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

Incorporate attributes into object properties in a dynamic manner

The sub-menu options are constantly shifting... How can I keep them in place?

Numerous options available in a dropdown menu

Add a specific class to an element when it has a child within it

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

AngularJS Input field fails to update due to a setTimeout function within the controller