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

您可以使用 afilter()或: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();
});

Answer 2

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