我有：
<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），默认情况下显示：无。例如：
$.(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');
});
});
});