简单的Jquery功能不起作用

Question

我有以下jQuery代码

$(document).ready(function() { 
    for(var i=1;i<4;i++) { 
        var img= ".img"+i; 
        var p= ".p"+i;
        $(img).on("click", function(){
            $(p).hide(); 
        }); 
    } 
});

应用于以下html：

<div>
    <article>
         <h1>Over mezelf <img src='images/plus.png' class='img1'/></h1>

        <p class='p1'>Test</p>
    </article>
    <article>
         <h1>Contact <img src='images/plus.png' class='img2'/></h1>

        <p class='p2'>Test</p>
    </article>
    <article>
         <h1>Website <img src='images/plus.png' class='img3'/></h1>

        <p class='p3'>Test</p>
    </article>
</div>

当我点击图片时，最后一个<p>消失，它不会对其他图像起作用。

Answer 1

问题是由于p的范围。当它运行事件处理程序代码时，它将始终使用最新的＆＃39; p＆＃39;，在这种情况下将是".p3"（see here for more information）

快速修复

您可以改为使用闭包：

$(document).ready(function() { 
    for(var i = 1; i < 4; i++) { 
        var img= ".img" + i;
        var p = ".p" + i;
        (function(p){
            $(img).on("click", function(){
                $(p).hide();
            });
        })(p);
    }
});

Here is a working example

---

<强>推荐

我个人更喜欢将HTML改为使用公共类，这样就不需要循环了。然后，您可以导航到正确的p代码...

HTML：

<div>
    <article>
         <h1>Over mezelf <img src='images/plus.png' class='img'/></h1>

        <p class='p1'>Test</p>
    </article>
    <article>
         <h1>Contact <img src='images/plus.png' class='img'/></h1>

        <p class='p2'>Test</p>
    </article>
    <article>
         <h1>Website <img src='images/plus.png' class='img'/></h1>

        <p class='p3'>Test</p>
    </article>
</div>

（请注意，如果您仍然需要编号的类，您可以拥有多个类。例如："img img1"）

使用Javascript：

$(document).ready(function() {
    $(".img").on("click", function () {
        $(this).closest("article").find("p").hide();
    });
});

Here is a working example

Answer 2

你只需要这个

$(img).on("click", function(){
    $(this).closest('article').find('p').hide(); 
 }); 

Fiddle

<强>文档

closest()

find()

Answer 3

您可以简单地使用：

 $('img').on("click", function(){
     $(this).parent().next().hide(); 
 }); 

JSFiddle：http://jsfiddle.net/TrueBlueAussie/XhRPC/1/

Answer 4

Milind Anantwar的答案肯定是要走的路，但这里还有一些注意事项：

您可能需要更具体的选择器，因此它们对布局更改的依赖性较小：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/XhRPC/2/

$(function () {
     $('article h1 img').on('click', function(){
         $(this).closest('article').find('p').last().hide(); 
     });
});

这会找到最接近的article祖先，然后找到最后一个段落（.children('p').last()执行相同的操作的速度只比find快，因为它只搜索一个级别）

*注意：$(function(){YOUR CODE HERE});只是$(document).ready(function(){YOUR CODE HERE});

的快捷方式

您不应该拥有唯一的类名，除非您实际上是要专门为每个元素设置样式。唯一标识符属于id=，共享类属于class=。

动态元素？：http://jsfiddle.net/TrueBlueAussie/XhRPC/3/

如果您引入的动态加载元素与您显示的类型相同，则可以轻松地将其更改为使用on()的委托版本：

$(function () {
     $(document).on('click', 'article h1 img', function(){
         $(this).closest('article').find('p').last().hide(); 
     });
});

委托事件在祖先监听，然后应用选择器，然后将该函数应用于生成事件的任何匹配元素。

首选是在DOM中使用第一个不变的祖先。如果失败（你没有显示页面的其余部分），你可以使用接收页面上所有冒泡事件的文档。