单击p.class，隐藏div.class - Jquery

Question

我从XML结构创建一个自动生成的页面，它具有类似的风格;

<p class=foo>ClickMe</p>
<div class=foo">
 ###somedata####
</div>

然后另一个就像它等等。

我的想法是，然后我可以点击paragraf并显示/隐藏div内容。 （这是聪明还是你能用另一种更有活力的方式做到这一点？）

$("p").click(function()
    {
       $("div").toggle("fast");
    });

现在所有的“div”元素都会隐藏，“div.nameonlcass”会做我想要的，我已经搜索但是没有设法找到如何获得类名。

我是jquery和im geussing的新手，这是一个非常简单的解决方案。

提前致谢。

Answer 1

您需要.next() JQuery方法

$("p").click(function(){
     $(this).next("div").toggle("fast");
});

Answer 2

试试这个

$("p").click(function() {
    $(this).next().toggle("fast");
});

Answer 3

是的，您的代码是正确的，但直接在选择器中使用代码会将您的逻辑应用于HTML上的所有可用<p>和<div>

所以你可以在下面的表格中写下

$(document).ready(function() {
    $("p.foo").click(function(){
       $(this).next("div.foo").toggle("fast");
    })
})

Answer 4

这可能是你想要的吗？

$('p.foo').click(function() {
   $(this).next('div.foo').toggle("fast");
});

Answer 5

首先，如果您选择将类添加到您的HTML中，请执行此操作

<p class="foo">ClickMe</p>
<div class="foo"">
 ###somedata####
</div>

其次你的jQuery代码隐藏了所有div，因为你选择了所有的div元素！因为$('div')选择HTML页面上的所有div元素

您可以选择隐藏所有具有“foo”类别的div：

$('p').on("click",function(){
    $('div.foo').hide();// hides all the div's that have the class foo
});

但我更愿意以更加动态的方式做到这一点：

$('p').on("click",function(){
   var classOfP=$(this).attr("class");
   var divSelector = "div."+classOfP;
   $(divSelector).hide();
});

所以这就是你点击的p元素的类，并隐藏了具有相同类的所有div。有了它，您可以更多地构建代码。

我建议的另一件事是使用.on("click",...)因为每次都会触发事件，如果它在创建后被添加到圆顶中。而.on()是自jQuery 1.7以来事件处理的新“标准”