1

我有一个 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 循环中运行函数。

我知道我可以使用大量代码来完成它，但我认为随着更多容器的添加，这样做会更容易。

提前致谢

4

3 回答 3

5

我想隐藏除被点击的以外的所有内容

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

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

演示

如果单击容器，这将隐藏所有其他容器。查看 jQuery API 文档以了解更多关于.not.

您现有的代码有几个问题：

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

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

于 2013-07-12T21:34:42.517 回答
1

你把这种方法弄得太复杂了。

如果您想在单击一个容器时隐藏所有其他容器，您可以这样做：

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

这是一个工作示例的小提琴......

如果你想让<p>标签必须被点击，你可以这样做：

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

另一个小提琴

于 2013-07-12T22:01:09.837 回答
0

您需要将对 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、标签或在上下文中查找元素比通过类名查找要快得多。总是。

我保存了对包装器（$context）的引用，然后从 $context 中找到了所有具有类“容器”的 div，并保存了对它的引用。

其次，当单击上下文中的链接时，我将单击事件委托给 $context，而不是将单击函数绑定到每个链接（绑定了 1 个事件而不是 20 个）。我也在使用 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。

我希望这有帮助！如果您希望对点击事件做更多事情，请告诉我。

于 2013-07-12T22:16:45.097 回答