JQuery / Javascript 选择器使用 toggle() 或 add/removeClass() 循环遍历元素数组答案

【问题标题】：JQuery / Javascript selector loop through array of elements with toggle() or add/removeClass()JQuery / Javascript 选择器使用 toggle() 或 add/removeClass() 循环遍历元素数组
【发布时间】：2013-10-25 14:04:51
【问题描述】：

我有：

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

【问题讨论】：

+1 以获得良好的问题格式。

标签： javascript jquery html css jquery-selectors

【解决方案1】：

没有必要使用循环

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

演示：Fiddle

【讨论】：

嘿，昨天它有效，但今天我添加了格式相同但新数据的新 Json，它奇怪地破坏了 toggleClass。 Add 或 RemoveClass 仍然有效，但 toggleClass 坏了。有什么想法吗？
@rebHelium 你生成的html是否改变了？
一点也不。很奇怪。我在每个变量之后都做了console.log，并且所有元素与两个JSON并排比较都是相同的。我注意到的一件事是，当我使用 toggleClass() 并按下按钮时，在开发人员工具中它显示了它如何尝试定位该类，但它没有成功重写它。奇怪的。我可以使用添加/删除类并且它可以工作，但是当我第二次单击该按钮时，我没有再次成功隐藏跨度。
@rebHelium 你确定点击处理程序被调用了吗......也可能是其他一些脚本正在干扰这个脚本......你可以在处理程序函数中添加一个console.log() stmt看看发生了什么
嗨阿伦。谢谢你。明天早上做，让你知道。