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

演示： 小提琴