JQuery隐藏/显示一个，而不是全部

I need help trying to figure out why this will only hide and show all of the elements for my hidden class. I've tried doing:

我需要帮助试图找出为什么这只会隐藏并显示我隐藏类的所有元素。我试过了：

$("h2 > p").removeClass("hidden");

And it just won't work at all when I use that. I've also tried:

当我使用它时它根本不起作用。我也尝试过：

$(this).find('p').removeClass("hidden");

And that won't work at all either. As it's for an assignment, I can't edit the CSS or HTML directly and it's an introduction to JQuery, so the actual JavaScript and JQuery shouldn't be advanced at all. I just don't understand why it won't work with either of the two examples I've shown above. All I need is one of the answers to show, not every single one.

这根本不起作用。由于它是一个赋值，我不能直接编辑CSS或HTML，它是对JQuery的介绍，因此实际的JavaScript和JQuery根本不应该高级。我只是不明白为什么它不适用于我在上面展示的两个例子中的任何一个。我需要的只是展示的答案之一，而不是每一个。

$(document).ready(function() {
    $("h2").on('mouseover', function() {
        $("p").removeClass("hidden");
    });
    $("h2").on('mouseout', function() {
        $("p").addClass("hidden");
    });
}); // end ready

This is the HTML portion including the classes that I'm trying to add and remove.

这是HTML部分，包括我尝试添加和删除的类。

<body>
<section>
    <h1>jQuery FAQs</h1>
    <ul id="faq_rollovers">
        <li><h2>What is jQuery?</h2>
            <p class="hidden">jQuery is a library of the JavaScript functions 
            that you're most likely to need as you develop web sites.</p>
        </li>
        <li><h2>Why is jQuery becoming so popular?</h2>
            <p class="hidden">Three reasons: It's free; It lets you get more done 
            in less time; All of its functions are cross-browser compatible.</p>
        </li>
        <li><h2>Which is harder to learn: jQuery or JavaScript?</h2>
            <p class="hidden">For most functions, jQuery is significantly easier to learn 
            and use than JavaScript. But remember that jQuery is JavaScript.</p>
        </li>
    </ul>        
</section>

Note: Since the p element is hidden and you can't actually hover over it, I've elected to use the h2 element as the mouseover selector.

注意：由于p元素是隐藏的，你实际上不能将鼠标悬停在它上面，我选择使用h2元素作为鼠标悬停选择器。

3 个解决方案

#1

Your problem is that the p tag is not inside the h2 tag. You can either do:

您的问题是p标签不在h2标签内。你可以这样做：

$(this).siblings("p").removeClass("hidden");

Or:

要么：

$(this).parent().find("p").removeClass("hidden");

#2

Try searching within the other h2 for the p tag:

尝试在其他h2中搜索p标记：

$(document).ready(function() {
    $("h2").on('mouseover', function() {
        $(this).siblings("p").removeClass("hidden");
    });
    $("h2").on('mouseout', function() {
        $(this).siblings("p").addClass("hidden");
    });
}); // end ready

#3

$( "h2" ).hover( function() {
  $(this).next().removeClass("hidden");
}, function() {
  $(this).next().addClass("hidden");
});

#1