jQuery toggleClass - 仅适用于第一个 ID 选择器

Question

我想使用 toggleClass() 创建其中一个阅读更多/阅读更少的按钮。

这是我的 html:

<p>Lots of bla bla bla.....<span id="plus">Plus</span></p>

<p>Lots of bla bla bla.....<span id="plus">Plus</span></p>

<p>Lots of bla bla bla.....<span id="plus">Plus</span></p>

这是我的 jQuery:

$(function(){

     $("#plus").on("click", function () {
        $(this).parent().toggleClass( "showmore" );
        var txt = $("p").hasClass("showmore") ? 'Minus' : 'Plus';
        $("#plus").text(txt);
    });

});

Fiddle: Click here

我的问题：

如何让 toggleClass 使用多个 ID（相同的选择器）。当前脚本仅适用于第一个 ID。

期待您的意见，干杯！

Answer 1

ID 应该是唯一的。您可以使用相同的 class 名称

<p>Lots of bla bla bla.....<span class="plus">Plus</span></p>

<p>Lots of bla bla bla.....<span class="plus">Plus</span></p>

<p>Lots of bla bla bla.....<span class="plus">Plus</span></p>

然后使用 class 选择器来定位它们。您还需要在点击事件中使用上下文 this 以使用 jquery 方法 .parent():

定位当前元素和父 p 元素

$(".plus").on("click", function () {
    $(this).parent().toggleClass( "showmore" );
    var txt = $(this).parent().hasClass("showmore") ? 'Minus' : 'Plus';
    $(this).text(txt);
});

jQuery toggleClass - 仅适用于第一个 ID 选择器

jQuery toggleClass - Only working with the first ID selector

html

jquery

toggleclass