JQuery Hide/Show一个，不是全部

Question

我需要帮助来弄清楚为什么这只会隐藏和显示我隐藏的 class 的所有元素。我试过：

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

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

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

那也根本行不通。由于是作业，我不能直接编辑CSS或HTML，它是对JQuery的介绍，所以实际的JavaScript和JQuery应该一点也不先进。我只是不明白为什么它不适用于我上面显示的两个示例中的任何一个。我只需要显示其中一个答案，而不是每个答案。

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

这是 HTML 部分，包括我要添加和删除的 classes。

<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>

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

Answer 1

尝试在另一个 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

Answer 2

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

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

或者：

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

Answer 3

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

JQuery Hide/Show一个，不是全部

JQuery Hide/Show one, not all

html

javascript

jquery

mouseleave

show-hide