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');
}