How to successively change a class on click

Question

Suppose I have a list of div:

<div id='d-1' class='hidden'>this one<br />
    <button onclick='next();'>Next</button>
</div>
<div id='d-2' class='show'>Second one
<br />
    <button onclick='next();'>Next</button>
</div>
<div id='d-2' class='hidden'>Third one<br />
    <button onclick='next();'>Next</button>
</div>
<div id='d-2' class='hidden'>Fouth one
<br />
    <button onclick='next();'>Next</button>
</div>

and the css:

.show {
  color: red;
}

.hidden {
  color: green;
}    

how can I change the classes successively？

I try to do it by:

$(function(){
 function next(){
 $(this).removeclass('show').addclass('hidden');
 }
});

any help? here is my code injsfiddle:

EDIT

Updated here

Answer 1

Your question has several aspects so will try to adress each one by one. If you use the chrome dev tools you can see that the console reports Uncaught ReferenceError: next is not defined. To get of this error move the function next() outside of document ready. So this

// this does not work
$( document ).ready(function() {    
    function next(){
         $(this).removeclass('show').addclass('hidden');
    }
});

becomes this

function next(){
    $(this).removeclass('show').addclass('hidden');
}

$( document ).ready(function() {    
    // next moved outside   
});

As you now can see you do not need the document.ready anymore.

The next error you can see on the chrome dev-tools is Uncaught TypeError: Object [object Object] has no method 'removeclass'. The reason is that the method (as others have already said) is removeClass

Changing this error and the one with addClass i added console.log('this', this); to find out to which object this points

function next(){
    console.log('this', this);
    $(this).removeClass('show').addClass('hidden');
}

Now you can see in the chrome dev tools that this points to the object Window. So you have to reconsider how you make sure that next() points to the right object. I like to pass the id or in this case the jQuery selector (# + id).

<div id='d-1' class='isActive'>first one<br />
    <button onclick="next('#d-1');">Next</button>
</div>

I changed the class names based on my understanding what you mean.

function next(jQSelector){      
     $(jQSelector).removeClass('isActive').addClass('isPassive');
}

Demo with first part

No this works for the first <div id='d-1' .... Take a look at demo 1. But i assume you want more. It really depends on what you mean. Should a click on the button for d1

• color d2 green and d1 red
• or should d1 be made green and the next div (d2) red.

Option 1 make current active (red) all others passive (green)

In this demo under the second headline a button click makes the parent div active (red-color) all others passive

<div id='d-1' class='myDivs isActive'>first one<br />
    <button onclick="makeActive('#d-1');">make active</button>
</div>
<div id='d-2' class='myDivs isPassive'>Second one<br />
    <button onclick='makeActive();'>make active</button>
</div>

And the javascript

function makeActive(jQSelector){

    console.log('makeActive', jQSelector, $(".myDivs"));
    // set every element with class .myDivs to passive
    $(".myDivs").removeClass('isActive').addClass('isPassive'); 

    // only set one element to active   
    $(jQSelector).removeClass('isPassive').addClass('isActive');
}

Answer 2

your "addclass" and "removeclass" should be camel case "addClass" and "removeClass" like this.

Use .toggleClass() instead of use .removeClass() and .addClass() for the same element.

$(function(){
    $("button").click(function() { 

      $(this).parent().toggleClass('show hidden');
    });

});

Fiddle