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

Customize Your Lists in Wordpress to Reflect Your Unique Style

ajax duplicator and reset form tool

The table row disappears but the value persists

The Joys of Delayed Animation with jQuery Isotope

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

Encountering an error while trying to add text: SyntaxError - Unexpected token 'for

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

Instructions for selecting all checkboxes in an HTML table with just one click

"Implementing jquery autocomplete feature with the ability to fetch data from

What is the best way to line up a Material icon and header text side by side?

Ways to eliminate all attributes and their corresponding values within HTML tags

Identifying changes in value in any scenario, jQuery

Eliminate Dates from the Past - Jquery Datepicker

Display my search box when the button is activated

Obtain personalized results for implementing in Convase JS from a PHP server

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

Locate the class ID and refine the search results by another class

Material UI Grid List rows are displaying with an unusually large gap between them, creating a

Error: The function execute_script() is expecting between one and two arguments, however three arguments were provided