使用带有特定类和切换类的事件 ID

Question

我正在使用 jQuery 文档页面上的以下示例中的 toggleClass 来创建“阅读更多”/“阅读更少”解决方案：

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

现在，当我单击“阅读更多”链接时，代码会显示两个文本块。我希望点击只影响相关的“块”。所以，如果我点击带有“block1-link”的span，带有“block1-content”的span应该切换。

我没有将 ID 直接添加到我的 jQuery 代码的原因是因为这需要适用于页面上任意数量的链接/内容分组。

我确定我很明显错过了一些东西。我希望有人可以帮助我纠正我写的内容。

谢谢！

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");
});