CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Carl Wirkus
Carl Wirkus

Reputation: 643

Adding and removing classes not working

I've used this exact code on a different div element and it works perfectly. When I went to add the same code to another div element with a different id it registers the element has been clicked but it doesn't add or remove any of the classes.

$('#quoteClick').click(function(){
    $('#cbox-1').addClass('displayCboxBackground');
    $('#cbox-2').removeClass('displayCboxBackground');
    $('#cbox-3').removeClass('displayCboxBackground');

    $('#dbox-1').addClass('displayBlock');
    $('#dbox-2').removeClass('displayBlock');
    $('#dbox-3').removeClass('displayBlock');
    console.log("clicked");
});

The html structure is as follows:

<div id="cbox-1">
    <div id="dbox-1">
         content...
    </div>
</div>    
<div id="cbox-2">
    <div id="dbox-2">
         content...
    </div>
</div>
<div id="cbox-3">
    <div id="dbox-3">
         <div id="quoteClick">
             a quote
         </div>
    </div>
</div>

JSFiddle: https://jsfiddle.net/m81c23cx/1/

In the fiddle you can see the content will changes when each header is clicked. When the "quoteClick" element is clicked I want it to change to the second headers content exactly how it does when the second header is clicked.

I can see in Chrome's console that when I click the div element that it highlights all the classes but it doesn't change any of them. I have the jQuery inside a document.ready() function so it should be waiting for the DOM to load and it works perfectly when I just write the lines into the console.

Upvotes: 2

Views: 2069

Answers (3)

Razia sultana
Razia sultana

Reputation: 2221

The classList property returns a token list of the class attribute of the element in question. Luckily for us, it also comes with a few handy methods:

  • add - adds a class
  • remove - removes a class
  • toggle - toggles a class

  • contains - checks if a class exists

    // adds class "foo" to el el.classList.add("foo");

    // removes class "bar" from el el.classList.remove("bar");

    // toggles the class "foo" el.classList.toggle("foo");

    // outputs "true" to console if el contains "foo", "false" if not console.log( el.classList.contains("foo") );

    // add multiple classes to el el.classList.add( "foo", "bar" );

Upvotes: 0

Dan Mindru
Dan Mindru

Reputation: 6104

I'm surprised that nobody actually questioned your use of ids (instead of suggesting that you should double-check for dupes). The reason why this code is hard to debug is because it's too complicated. As a result, you'll have a hard time fixing issues similar to this in the future too.

Drop it, do it better. I didn't even go through your fiddle. Instead, I'm going to propose that you change your approach altogether.

Update your HTML and use classes instead of ids. Something similar to this:

<div class="cbox">
    <div class="dbox">
         content...
    </div>
</div>    
<div class="cbox">
    <div class="dbox">
         content...
    </div>
</div>
<div class="cbox">
    <div class="dbox">
         <div id="quoteAdvert">
             a quote
         </div>
    </div>
</div>

Update your JavaScript and use this to get the context of the current box:

$('.cbox').click( function cboxClicked () {
  // Remove the previous class from all .cbox & .dbox elements; we don't care which
  $('.cbox').removeClass('displayCboxBackground') 
  $('.dbox').removeClass('displayBlock')

  // Add a new class to the clicked .cbox & it's child .dbox
  $(this).addClass('displayCboxBackground')
  $(this).children('.dbox').addClass('displayBlock')
})

The beauty of this? You can have 1000 boxes, it'll still work. No need to add any extra lines of code.

Here's a fiddle showing it in action.

Upvotes: 2

Jbird
Jbird

Reputation: 2886

The example code you provided is not consistent with the jsfiddle you created.

In your fiddle, you use the jquery selector $('#quoteClick') but there is no element with that id. There is a #quoteAdvert element however. Change that and you'll see the click in the console.

Upvotes: 1

Related Questions