Question

Jquery的新手，我认为我的大多数麻烦来自基于我使用的许多其他语言的假设。现在的问题涉及HTML id的绝对遍历。例如，给定具有不同id的多组HTML：

<div id="navi1">
    <div class = "linker">
        <a href="javascript:void(0)"><img src="gfx/link1ver.png" /></a>
        <div class="expand"></div>
        <img src="gfx/divide1.png" />
    </div>
    <div id = "content1">
        test
    </div>
</div>

<script>
    var a = ['#navi0', '#navi1', '#navi2'];
    var b = ['#content0', '#content1', '#content2'];

    $(a[0] + ' .expand').css({'background-color': '#017693', 'height': '50px'});
    $(a[1] + ' .expand').css({'background-color': '#01D092', 'height': '50px'});
    $(a[2] + ' .expand').css({'background-color': '#D0013F', 'height': '50px'});

    for(i = 0; i <= 2; i++) {
        $(a[i] + ' a').click(function() {

            for(j = 0; j <= 2; j++) { 
                if($(a[j] + ' .expand').css('height') == '300px') {
                    $(a[j] + ' .expand').animate( {
                        height: '0px'
                    }, 500);
                    $(b[j]).animate( {
                        width: '100px'
                    }, 500);

                }
            }

            $(this).next().animate( {
                height: '300px'
            }, 500);    

            $(b[i]).animate( {
                width: '500px'
               }, 500);     

        });     
    }


</script>

这只是为了测试Jquery的工作原理。关于这个问题，最后一个动画尝试对不在当前'this'或'this'的父级内的id执行。如何使用此设置到达那里并且我对数组'b'的使用是否合适？使用普通类而不是唯一内容id更好吗？

我一直特别关注好的代码，所以无论如何都要投入提示。

Answer 1

好吧，所以我做了一个jsFiddle并修改了你的代码。您将看到根本不需要使用for循环来绑定处理程序。我给了每个div它自己的ID，所以你使用CSS设置边框和背景颜色（毕竟，这就是CSS的用途）。

请参阅：http://jsfiddle.net/GpEqA/1/

代码如下：

$(function() {
    $('.link').click(function() {
        $(".link").not(this).each(function() {
            $(this).find("div.wrap").hide();
            $(this).find("div.expand").animate({
                height: "0px"
            }, 300);

            $(this).find("div.services").animate({
                width: "0px"
            }, 300);
        });

        $(this).find("div.expand").animate({
            height: "300px"
        }, 500);

        $(this).find("div.services").animate({
            width: "647px"
        }, 500, "", function() {
            $(this).find("div.wrap").fadeIn("slow");
        });
    });
});

Answer 2

使用join：

$(b.join(','))

请参阅此处的示例：

http://jsfiddle.net/bZJAf/

Answer 3

您可以使用类，让jQuery自动将相同的代码应用于具有相同类的多个对象，而不是尝试使用for循环一遍又一遍地运行相同的代码。

首先，将HTML更改为：

<div id="navi1" class="nav">
    <div class = "linker">
        <a class="toggle" href="javascript:void(0)"><img src="gfx/link1ver.png" /></a>
        <div class="expand"></div>
        <img src="gfx/divide1.png" />
    </div>
    <div class="content">
        test
    </div>
</div>

更改是将一个类添加到顶级nav div并在链接和内容上放置一个类。

然后，您可以使用此代码来响应点击：

$(".nav .toggle").click(function() {
    var this$ = $(this);
    var parent$ = this$.closest(".nav");
    // get all .expand elements that are not in the one we clicked on
    $(".nav").not(parent$).find(".expand").each(function() {
        var self = $(this);
        if (self.css("height") == "300px") {
            self.animate({height: "0px"}, 500);
            self.closest(".nav").find(".content").animate({width: "100px"}, 500);
        }
    });
    // set the state of the one clicked on
    this$.next().animate({height: "300px"}, 500);
    parent$.find(".content").animate({width: "500px"}, 500);
});

你会注意到根本没有for循环。它只是使用jQuery的.each()或者使用jQuery将对匹配选择器的所有项进行操作而不需要手动迭代的事实。

此代码有两个部分。第一部分对.nav项目进行操作，这些项目不是被点击的项目（重置其状态），第二部分对.nav项目进行操作，该项目是被点击的项目。它根本不使用任何ID，而是转到父.nav，并在它正在处理的块中按类名查找相关项。

如果您控制完整的HTML页面，我建议使用CSS来设置初始背景颜色和高度，而不是javascript：

.nav {height: 50px;}
#nav1 {background-color: #017693;}
#nav2 {background-color: #01D092;}
#nav3 {background-color: #D0013F;}

如果你必须使用javascript，你可以使用它来避免重复代码并使其驱动表：

var naviSettings = [
    {sel: '#navi0', bColor: '#017693'},
    {sel: '#navi1', bColor: '#01D092'},
    {sel: '#navi2', bColor: '#D0013F'}
];

for (var i = 0; i < naviSettings.length; i++) {
    var item = naviSettings[i];
    $(item.sel + " .expand").css({"background-color": item.bColor, height: "50px"})
}

在JQuery调用中引用多个ID

3 个答案: