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

演示：Fiddle

JQuery / Javascript选择器使用toggle（）或add / removeClass（）循环遍历元素数组

1 个答案: