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

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

我没有直接将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");
});

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

2 个答案: