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

});

小提琴： Click here

我的问题：

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

期待您的投入，欢呼！

Answer 1

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

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

然后使用类选择器来定位它们。你还需要在click事件中使用上下文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选择器

1 个答案: