jquery - 查找文本与列表中单击的文本匹配的元素

Question

我在侧面导航栏中有一个列表，它代表页面上的对象。对象的标题与列表中的标题匹配。如下图所示:

我正在尝试使用 jQuery 显示切换这些对象，以便当用户单击红色列表项(与红色页面对象相同的标题标题)时，相应的页面对象会切换为显示或隐藏.

这是我的简化代码:

// The left navigation list
<ul>
    <li>Charity Challenge Golf Outing</li>
    <li>Spring 2014 Membership Renewal</li>
    <li>EMEA Product Launch</li>
    <li>Platinum Customer Retention Spring Offer</li>
    <li>Key Account Upsell 2014</li>
</ul>

<小时/>

// A couple of page objects
<div class="single-activity">
    <h2>Charity Challenge Golf Outing</h2>

    [...]
</div>

<div class="single-activity">
    <h2>Spring 2014 Membership Renewal</h2>

    [...]
</div>


<div class="single-activity">
    <h2EMEA Product Launch</h2>

    [...]
</div>

<小时/>

// The jQuery
$(".left-panel li").click(function() {
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity").slideToggle();
});

<小时/>

问题:我现在知道为什么它不起作用，但我有点不确定如何根据 <h2> “查找”对象标题。该代码可以滑动切换所有对象(因为它们都具有 .single-activity 类，但我只想隐藏单击的一个。有什么想法吗？

Answer 1

您可以使用 filter() 或 :contains 选择器:

$(".left-panel li").click(function() {
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity:contains("+$(this).text()+")").slideToggle();
});

或使用filter():

$(".left-panel li").click(function() {
    var txt = $.trim( $(this).text() );
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity").filter(function() {
        return $.trim( $(this).text() ) == txt;
    }).slideToggle();
});