JQuery / Javascript選擇器使用toggle（）或add / removeClass（）循環遍歷元素數組

Question

我有：

<button id="1"> Button 1 </button>
<span id="s1"> Span 1 </span>

<button id="2"> Button 2 </button>
<span id="s2"> Span 2 </span>

<button id="3"> Button 3 </button>
<span id="s3"> Span 3 </span>

我需要的是：

- 當單擊按鈕1時，跨度1顯示，當再次單擊時，它會消失並顯示按鈕1. - 單擊按鈕2，跨度2顯示，再次單擊時消失並顯示按鈕2. - 單擊按鈕3，跨度3顯示，再次點擊它會消失並顯示按鈕3。

我目前有一個創建html的循環，在一個數組中指定id並設置為一個類（.off），默認情況下為display：none。 例如：

$.(body).append( '<button id="'+[i]+'">Button'+[i]+'</button>
                  <span id="'+[i]+'" class="off">'

但我無法逐一選擇。 我得到錯誤，或者只是第一個元素工作，或者我點擊1個按鈕並同時顯示所有跨度。 我的代碼：

for ( var j = 0; j < id.length; j++ ){
    $('button' ).on("click", function(e) {
        $('span' ).removeClass('off').addClass('on');
        $(this).on("click", function(e) {
             $('span').removeClass('on').addClass('off');             
         });
    });
});

Answer 1

不需要使用循環

$(document).on("click", 'button', function(e) {
    $(this).next('span' ).toggleClass('off on');
});

演示： 小提琴