使用具有特定 class 和 toggleClass 的事件 ID

Question

我在 jQuery 文档页面上的以下示例中使用 toggleClass 来创建 "Read More"/"Read Less" 解决方案：

http://api.jquery.com/toggleClass/

这是我正在使用的 HTML 代码：

<span id="block1-link" class="read-more-text more">Read More</span>
<span id="block1-content" class="sh-content">1st paragraph text<span class="read-more-text"> Hide Text</span></span>

<span id="block2-link" class="read-more-text more">Read More</span>
<span id="block2-content" class="sh-content">2nd paragraph text<span class="read-more-text"> Hide Text</span></span>

以及伴随的jQuery：

    (function ($) {
        $( ".read-more-text" ).click(function() {
            $( ".sh-content" ).toggleClass( "show-text" );
            $( ".read-more-text.more" ).toggleClass( "hide-text" );
        });
    }(jQuery));

现在，当我单击 "Read More" link 时，代码会显示两个文本块。我希望点击只影响相关 "block"。因此，如果我单击带 "block1-link" 的跨度，带 "block1-content" 的跨度应该切换。

我没有将 ID 直接添加到我的 jQuery 代码中的原因是，这需要对页面上任意数量的 link/content 分组有效。

我确定这是我明显遗漏的东西。我写的东西希望有人能帮我改正。

谢谢！

Answer 1

您可以使用当前元素点击上下文 this 来仅定位点击的和下一个 div 元素：

$( ".read-more-text" ).click(function() {
        $(this).next().toggleClass( "show-text" );
        $(this).toggleClass( "hide-text" );
    });

Answer 2

试试这个。您可以使用 jquery.

的 .on()

$(".read-more-text" ).on( "click", function() {
    $(this).next().toggleClass("show-text");
    $(this).toggleClass("hide-text");
});

编辑：在同一主题上进一步发展，我调整了html 类，使其更清晰、更容易。

<span id="block1-link" class="read-more">Read More</span>

<span id="block1-content" class="sh-content">1st paragraph text<span class="hide-more"> Hide Text</span>
</span>

<span id="block2-link" class="read-more">Read More</span>

<span id="block2-content" class="sh-content">2nd paragraph text<span class="hide-more"> Hide Text</span></span>

$(".read-more" ).on( "click", function() {
    $(this).next().toggleClass("show-text");
    $(this).toggleClass("hide-text");
});

$(".hide-more" ).on( "click", function() {
    $(this).parent().toggleClass("hide-text");
    $(this).parent().prev().toggleClass("show-text");
});

使用具有特定 class 和 toggleClass 的事件 ID

Using event ID with specific class and toggleClass

javascript

jquery

html

toggleclass