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

}); 

小提琴： 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> 

然後使用類選擇器來定位它們。還需要在點擊事件使用的上下文this目標與jQuery方法.parent()當前元素和父p元素：

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