Question

这是我的代码：

$("#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");
 });

基本上我想在这里做的是每当点击#close_btn时，其后面的7个元素将移动位置。 1将更改为2，2将更改为3 ... 7将更改为1，等等。但是，此代码会导致所有元素以.position_1结尾。这可能吗？我希望每次单击关闭按钮时，每个元素都会移动1个空格。

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

以下是演示：

http://jsfiddle.net/SSWye/

Answer 1

在更新课程之前收集每个班级的所有成员：

$("#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

Answer 2

我建议将最后一个元素添加到包装元素：

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

然后，您可以使用CSS :nth-child选择器设置元素的样式：

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

添加/删除多个类onclick的Jquery问题

2 个答案: