我的for循环有什么问题

Question

我有一个Jquery for循环,当我单击一个除了自身之外的同一个类的元素时它被激活,尽管它没有做任何事情.

这是循环:

$('.container').click(function(){
    for(i = 1; i != 20; i++) {
        $('.container' + i + ' h1 a').click(function(){
            $('.container:not(.container' + i +')').hide();
        });
    }
});

HTML:

<div class='container container1'>
    <div class='content'>
        <h1><a href='#'>Title</a></h1>
        <p>Content</p>
    </div>
</div>
<div class='container container2'>
    <div class='content'>
                <h1><a href='#'>Title</a></h1>
        <p>Content</p>
    </div>
</div>
<div class='container container3'>
    <div class='content'>
                <h1><a href='#'>Title</a></h1>
        <p>Content</p>
    </div>
</div>

我环顾四周,发现问题是你不能在for循环中运行一个函数.

我知道我可以使用繁琐的代码来实现它,但我认为随着更多的容器将被添加,这样做会更容易.

提前致谢

Answer 1

除了被点击的那个之外,我想隐藏它们

我相信你想要的是这样的:

var $container = $('.container').click(function(){
    $container.not(this).hide();
});

DEMO

如果单击容器,这将隐藏所有其他容器.查看jQuery API文档以了解更多信息.not.

您现有的代码存在一些问题:

• 您正在循环中创建一个函数.由于在JavaScript中实现闭包的方式,如果您尝试访问函数内部的loo变量(这样做),这可能会导致意外行为.请参阅循环内的JavaScript闭包 - 简单的实际示例

• .container只要单击其中任何一个元素,就会将新的单击事件处理程序绑定到所有其他元素.即,在您单击三个元素后,每个容器将附加3个附加的事件处理程序,并且每个容器都执行相同的操作.