在循环中更改多个类名

Question

我昨天在我正在做的这个项目上发表了帖子，并设法找到了一种方法来获得我所需要的大部分预期效果。我可能做了很长一段路，但这是我所拥有的和我需要的。

这被设置为四个框，每个框从不同的z索引级别(40，60，80和100)开始#layer1在顶部。当单击顶部框时，它会转到后面，而其他三个框会被带到前面。当其他三个框中的一个被单击时，它被带到前面，而它前面的框被推回。我让.layer1、.layer2、.layer3和.layer4函数运行它，它可以工作，但只有一次。之后，事情开始变得复杂起来。我尝试在changePos函数中按层id查找每个框的当前z索引值，然后创建一个数组来保存这些值，然后创建一个循环来将它们与我已有的索引值相对应，但结果并不正确。

    <script>
    $(function() {


       function changePos(){

                                    var l1Index = $("#layer1").css('zIndex');
                                    var l2Index = $("#layer2").css('zIndex');
                                    var l3Index = $("#layer3").css('zIndex');
                                    var l4Index = $("#layer4").css('zIndex');

                                    var i;
                                    var layerZindex = new Array();
                                    layerZindex[1] = l1Index;
                                    layerZindex[2] = l2Index;
                                    layerZindex[3] = l3Index;
                                    layerZindex[4] = l4Index;

                                    for (i=1;i<4;i++)
                                        {
                                        if(layerZindex[i] == 40){
                                            alert( "class layer" + i + "= 40, is now #layer4");
                                            $("#layer4").removeClass();
                                            $("#layer4").addClass("layer" + [i] + " zindex" + [i]);
                                            }
                                        else if(layerZindex[i] == 60){
                                            alert( "layer" + i + "= 60, is now #layer3");
                                            $("#layer3").removeClass();
                                            $("#layer3").addClass("layer" + [i] + " zindex" + [i]);
                                            }
                                        else if(layerZindex[i] == 80){
                                            alert( "layer" + i + "= 80, is now #layer2");
                                            $("#layer2").removeClass();
                                            $("#layer2").addClass("layer" + [i] + " zindex" + [i]);
                                            }
                                        else if(layerZindex[i] == 100){
                                            alert( "layer" + i + "= 100, is now #layer1");
                                            $("#layer1").removeClass();
                                            $("#layer1").addClass("layer" + [i] + " zindex" + [i]);
                                            }
                                        }
                                    }

        $(".layer1").click(function() {

            $(".layer1").animate({
                opacity: "0.6",
                left: "-120px",
                top: "-90px",
                zIndex: "40"
            }, 850);
            $(".layer2").animate({
                opacity: "1",
                left: "40px",
                top: "30px",
                zIndex: "100"
            }, 550);
            $(".layer3").animate({
                opacity: "0.6",
                left: "40px",
                top: "30px",
                zIndex: "80"
            }, 700);
            $(".layer4").animate({
                opacity: "0.6",
                left: "40px",
                top: "30px",
                zIndex: "60"
            }, 850);
            $("#siteDesc1").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc2").animate({
                opacity: "1"
            }, 600);
            changePos();
        });


        $(".layer2").click(function() {
            $(".layer2").animate({
                opacity: "1",
                left: "40px",
                top: "30px",
                zIndex: "100"
            }, 400);
            $(".layer1").animate({
                opacity: "0.6",
                left: "-40px",
                top: "-30px",
                zIndex: "80"
            }, 550);
            $("Descriptions").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc1").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc2").animate({
                opacity: "1"
            }, 600);
            changePos();
        });

        $(".layer3").click(function() {
            $(".layer3").animate({
                opacity: "1",
                left: "80px",
                top: "60px",
                zIndex: "100"
            }, 400);
            $(".layer1").animate({
                opacity: "0.6",
                left: "-40px",
                top: "-30px",
                zIndex: "80"
            }, 400);
            $(".layer2").animate({
                opacity: "0.6",
                left: "-40px",
                top: "-30px",
                zIndex: "60"
            }, 550);
            $("Descriptions").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc1").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc3").animate({
                opacity: "1"
            }, 600);
            changePos();
        });

        $(".layer4").click(function() {
            $(".layer4").animate({
                opacity: "1",
                left: "120px",
                top: "90px",
                zIndex: "100"
            }, 400);
            $(".layer1").animate({
                opacity: "0.6",
                left: "-40px",
                top: "-30px",
                zIndex: "80"
            }, 400);
            $(".layer2").animate({
                opacity: "0.6",
                left: "-40px",
                top: "-30px",
                zIndex: "60"
            }, 550);
            $(".layer3").animate({
                opacity: "0.6",
                left: "-40px",
                top: "-30px",
                zIndex: "40"
            }, 700);
            $("Descriptions").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc1").animate({
                opacity: "0"
            }, 600);
            $("#siteDesc4").animate({
                opacity: "1"
            }, 600);
            changePos();
        });

    });​
        </script>

Here is my html

    <div id="sites">
        <div id="layer1" class="layer1 zindex1">
        </div>
        <div id="layer2" class="layer2 zindex2">
        </div>      
        <div id="layer3" class="layer3 zindex3">
        </div>      
        <div id="layer4" class="layer4 zindex4">
        </div>
    </div>

在css中，#layer id当前驱动颜色，layer类驱动大小、不透明度和定位类型(绝对)，zindex类使用边距驱动位置。

我的问题是，我需要在一个循环上运行它，在这个循环中，layer类在函数运行后根据哪个box最终具有最高的z索引而重新发出。

另外，对于是否有更有效的方法来运行这种效果，有什么看法吗？

：并在这里更新我的进度，它是如此接近。我还没有弄清楚是什么导致了这个问题，但是行为似乎执行了最初的转换，没有问题，但是当我运行changePos时就挂起了。它执行指定给顶部新框的功能，而不是重命名它。再次单击时，它执行.layer1框的功能，然后在这两个框之间切换。changePos函数看起来确实重命名了类，但在某些地方它变得混乱了。也许是通过layerZindex数组？下一步，我将深入了解这一点。

Answer 1

通过外部消息来源，我得到了一些帮助。这就是我得到的。

function changePos() {
        // References to the z-index levels, this makes our code shorter and more efficient
        var levels = {40 : 4, 60 : 3, 80 : 2, 100 : 1};
        var i = 1;
        $('[id^=layer]').each(function() {
            // Get the element z-index level
            var zIndexLevel = $(this).css('zIndex');

            // Set the respective element class
            if (levels[zIndexLevel]) {
                $('#layer' + i).attr('class', 'layer' + levels[zIndexLevel]);
                $('#SiteDescriptions' + i).animate({opacity: "1"}, 500);

                $('#SiteDescriptions' + !i).animate({opacity: "0"}, 500);
            //alert( levels[zIndexLevel] + ":" + zIndexLevel);
            i++;
            }
        });

希望这篇文章能帮助那些可能有同样问题的人。