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

如果单击一个容器，这将隐藏所有其他容器。 Have a look at the jQuery API documentation to learn more about .not

现有代码存在一些问题：

您正在循环中创建一个函数。由于在JavaScript中实现闭包的方式，如果您尝试访问函数内部的loo变量（这样做），这可能会导致意外行为。请参阅JavaScript closure inside loops – simple practical example
只要您点击其中任何一个元素，就会将新的点击事件处理程序绑定到所有其他.container元素。即单击三个元素后，每个容器都会附加3个附加的事件处理程序，每个容器都会执行相同的操作。

Answer 2

你这样做太复杂了。

如果要在单击其中时隐藏所有其他容器，则可以执行以下操作：

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

这是一个带有工作示例的fiddle ......

如果你想要点击<p>标签，你可以这样做：

$(function () {
    $('p').click(function () {
        $('.container').not($(this).parents()).hide();
    });
});

另一个fiddle

Answer 3

您需要将对i的引用作为参数传递给内部函数，以使i现在是函数的本地函数。您似乎是基于对外部div的单击绑定多个事件，然后将多个单击事件绑定到div的内部锚标记以隐藏所有不是锚标记的父级的div。

这是我的解决方案：

HTML

 <div id="wrapper">
    <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>
</div>

的JavaScript

var $context = $('#wrapper'),
    $containers = $('#wrapper').find('div.container');

$context.on('click', '.container a', function() {
    var $theAnchorClicked = $(this),
        parentClassofAnchor = $this.parent().parent().parent().prop('class'); 

   $containers.each(function() {
       $theCurrentContainer = $(this);
       if (!$(this).hasClass(parentClass)) $(this).hide();
    });
});

首先，我将所有'容器'div包装在一个包装div（'#wrapper'）中，该div用作查找容器的上下文。这只是因为通过id，tag或在上下文中查找元素比通过类名查找要快得多。总是

我保存了对包装器（$ context）的引用，然后从$ context找到了所有带有'container'类的div，并保存了对它的引用。

其次，不是将click函数绑定到每个链接，而是在单击上下文中的链接（1个事件绑定而不是20个）时将click事件委托给$ context。我也使用jQuery的.on（）方法，因为它推荐用于jQuery 1.7 +。

那么在委托给$ context的click事件中发生了什么？ .on（）方法在匹配'.container a'的元素上指定'click'事件，然后指定要执行的函数。在函数中，这是对被单击链接的引用。

保存点击的链接，以及父div.container的类，例如'.container .container1'。你会注意到有几个父母被遍历找到它，因为链接嵌套在其他几个元素中。

现在保存了这些，我使用jQuery的.each（）方法遍历我们在$ containers中保存的所有容器。我们需要检查所有没有我们找到的类的容器（parentClassofAnchor）并隐藏它们。在.each（）函数中，这不是对链接的引用，它现在是对循环中当前div.container的引用（$ theCurrentContianer）。然后我们使用一个简单的if语句来检查它是否没有我们想要显示的类。在这种情况下，我们隐藏了该div。

我希望这有帮助！如果您希望通过点击活动完成更多工作，请与我们联系。

我的for循环有什么问题

3 个答案: