Question

点击div时，我想要扩展 p 。但是，当我点击两个div中的任何一个时，所有 p 都会被展开，当然我想要展开 p ，这是点击div的孩子。不是所有的人。这就是我使用这一行的原因：

        jQuery(this).find("p").toggle(500);

但显然有些不对劲。我该怎么办？下面，我发布了更多代码。提前谢谢。

    <script type="text/javascript" src="Libraries/jquery.js"></script>
    <script type="text/javascript"> 
$(document).ready(function(){

$("p").hide();
    $(this).click(function(){
 jQuery(this).find("p").toggle(500);
 });

});
</script>

<style type="text/css"> 
.a{
background-image: url(Images/brandimage_74_238px.gif);
}
.b{
background-image: url(Images/someimage.gif);
}
</style>

</head>
<body>

<div class="a">
<p>aaaaaaaaaaaa aaaaaa a  aa a a a</p>
</div>

<div  class="b">
<p>bb b b b b b b b b b b b b b b b</p>
</div>

</body>

Answer 1

$("p").hide();
    $(this).click(function(){
 jQuery(this).find("p").toggle(500);
 });

您将点击事件绑定到文档。相反，将它绑定到div：

$('div').click(function(){
   $(this).find("p").toggle(500);
 });

Answer 2

使用此代码：

$('div').click(function(){
  $(this).filter('p').toggle(500);
});

您绑定了document

Answer 3

您完全误解了this选择器：

$(document).ready(function(){
    $("p").hide();
        $(this).click(function(){
            jQuery(this).find("p").toggle(500);
        });
});

首先，您在document上执行jQuery函数，现在您使用的$(this)选择器引用了document，因为它位于$(document).ready内功能

正确的做法是：

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide(){
   });
});

按照我的方式，您首先拥有一个p选择器，如果您点击，则this会引用p。所以基本上click函数适用于HTML中的所有<p>个对象，但只有您点击的<p>才会隐藏，而$("p").hide()所有<p>所有{{1}}对象将被隐藏。

如何使用“this”选择器进行定位？

3 个答案: