CODEWITHSUNDEEP
javascriptjquerycss
user9129169
user9129169

Reputation: 1

jQuery Class Change

The context of which I'm working with is here: http://jsfiddle.net/888egs94/1/

To achieve the following I've been using (what seems like) a hundred versions of 

$('.two').click(function() {
      if($('.two')){
        $('.two').addClass("one");
        $('.two').removeClass("two") }
}

But I know there must be a simpler way. I am completely new to jQuery as of today. Trying to generate something like a conveyor belt for a client.

  1. User clicks on .two:

    • .two adds .one class, removes .two class
    • .three adds .two class, removes .three class
    • .one adds .three class, removes .one class

  2. User clicks on .three:

    • .three adds .two class, removes .three class
    • .two adds .one class, removes .two class
    • .one adds .three class, removes .one class
    • .two adds .one class, removes .two class

  3. User clicks on .one:

    • modal opens.

It's essentially a carousel but inheriting classes if that makes sense. Any help is greatly appreciated. I have the animation down, it's just getting the classes right and consistent (so that they're not overlapping or moving when they're not supposed to).

Upvotes: 0

Views: 51

Answers (1)

TJBlackman
TJBlackman

Reputation: 2313

A lot is going on here:

  1. As was already pointed out, your if statement is not checking for a true or false, it's simply selecting some elements.
  2. The way your css is set up, even if the elements moved to their new spots, you wouldn't notice. The middle block .two is always yellow and always in the middle. So if I give another block the class of .two it would just instantly update itself to be in that spot. You could fix this by using different classes to assign color.
  3. Finally, you don't have an else statement to check if the class is .one which would indicate showing a modal instead of rotating blocks.

All that being said, I believe this is what you're looking for. Hopefully you can learn from this example. http://jsfiddle.net/xph5dgto/1/

Upvotes: 2

Related Questions