CODEWITHSUNDEEP
javascriptjquerytoggleclass
chriswhiteley
chriswhiteley

Reputation: 13

Toggle Through Multiple Classes with jQuery

I am attempting to cycle through 3 classes when the user clicks a button. I found someone with the same challenge as me, but I lack the reputation to comment on the post for any follow up.

Here is the original code to cycle through the classes:

$('.one, .two, .three').click(function() {                             
    this.className = {
       three : 'one', one: 'two', two: 'three'
    }[this.className];
});

and I have modified it as follows:

$('#next').click(function() {                             
    this.className = {
       liscombe : 'digby', digby: 'keltic', keltic: 'liscombe'
    }[this.className];
});

This works as expected and cycles through the classes on the #next element, however I would like to have the class change happen on the body tag when the #next is clicked. I'm not sure how to modify the 'this.' I have tried body.className but that did not work.

How can this be modified to have the body class change on click?

Upvotes: 1

Views: 110

Answers (2)

jonode
jonode

Reputation: 797

'this' is just passing whatever selector you used in the initial selection. So its passing #next. Change "this" to $('body')

Upvotes: 0

rwacarter
rwacarter

Reputation: 2004

document.body.className should work

Upvotes: 1

Related Questions