Jquery issue with adding / removing multiple classes onclick

Question

here is my code:

$("#close_btn").click(function(){
        $("#overlay").hide();
        $("#overlay_content").remove();
        $(".position_1").removeClass("position_1").addClass("position_2");
        $(".position_2").removeClass("position_2").addClass("position_3");
        $(".position_3").removeClass("position_3").addClass("position_4");
        $(".position_4").removeClass("position_4").addClass("position_5");
        $(".position_5").removeClass("position_5").addClass("position_6");
        $(".position_6").removeClass("position_6").addClass("position_7");
        $(".position_7").removeClass("position_7").addClass("position_1");
 });

Basically what I want to do here is whenever the #close_btn is clicked the 7 elements that lie behind it will move position. 1 will change to 2, 2 will change to 3 ... 7 will change to 1, etc. This code however results in all of the elements to end up in .position_1. Is this possible to do? I want every time the close button is clicked that each element shifts 1 space.

css:

.position_1 { top:-500px; left:-175px; }
.position_2 { top:-300px; left:175px; }
.position_3 { top:0px; left:175px; }
.position_4 { top:150px; left:-20px; }
.position_5 { top:130px; left:-330px; }
.position_6 { top:0px; left:-500px; }
.position_7 { top:-300px; left:-480px; }

Here's the demo:

http://jsfiddle.net/SSWye/

This question needs a demo.

Ram
– Ram

2014-05-17 10:33:47 +00:00
Commented May 17, 2014 at 10:33 — Ram
– Ram, Commented May 17, 2014 at 10:33
addded the demo ^ @undefined

mpn
– mpn

2014-05-17 10:40:36 +00:00
Commented May 17, 2014 at 10:40 — mpn
– mpn, Commented May 17, 2014 at 10:40

Barmar · Accepted Answer · 2014-05-17 10:51:21Z

1

Collect all the members of each class before updating their classes:

$("#close_btn").click(function () {
    $("#overlay").hide();
    $("#overlay_content").remove();
    var positions = [];
    for (var i = 1; i <= 7; i++) {
        positions[i] = $(".position_" + i);
    }
    for (var i = 1; i <= 7; i++) {
        var nextpos = i < 7 ? i+1 : 1;
        positions[i].removeClass("position_" + i).addClass("position_" + nextpos);
    }
});

Working demo

edited May 17, 2014 at 10:51

answered May 17, 2014 at 10:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mpn Over a year ago

This didn't work either... would you be able to edit the demo to prove it? It's not working for me :/

mpn Over a year ago

Great solution as well. Though I think @undefined 's solution was a bit cleaner and more simple :)

Barmar Over a year ago

What changed your mind and caused you to accept mine instead?

mpn Over a year ago

I realized this worked better for adding animation to the movement. :) And all around seemed like a more logical solution after testing it out

Ram · Accepted Answer · 2014-05-17 10:49:58Z

1

I would suggest prepending the last element to the wrapper element:

$("#close_btn").click(function(){
    $("#overlay").hide();
    $("#overlay_content").remove();
    $('.icon').last().prependTo('#icons');
});

Then you can style the elements using CSS :nth-child selector:

.icon:nth-child(1) { top:-500px; left:-175px; }
.icon:nth-child(2) { top:-300px; left:175px; }
...

edited May 17, 2014 at 10:49

answered May 17, 2014 at 10:44

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

Jquery issue with adding / removing multiple classes onclick

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related