需要可扩展的多个开/关按钮

Question

我一直在搞乱some code（感谢@JohnieHjelm！）我找到了切换按钮。我将它减少到我需要的最低限度并将其包含在我的页面中。效果很好，一键搞定。 The problem comes when there's more than one button。它开始看起来不错，但后来就出错了，正如您在上一个链接中看到的那样：

<div id = 'settings'>
  <p>
    Links: 
    <span class = 'onoff on'>ON</span>
    <span class = 'onoff'>OFF</span>
    </p><br />
  <p>
    Chapters: 
    <span class = 'onoff on'>ON</span>
    <span class = 'onoff'>OFF</span>
  </p>
</div>

$(function(){
    $('#settings .onoff').click(function(){
        $('#settings .onoff').removeClass("on");
        $(this).addClass("on"); 
    });
});

切换按钮起初看起来不错：

但是当点击时，一切都出错了：

现在，我知道我可以调用第二个按钮“onoffb”并为新类（或 id）重复整个 $(function()) 位。它甚至可能适用于 2 或 3 个按钮，但我完全不希望重复那一堆代码，甚至在可能有 10 个或更多这样的按钮时更不喜欢。

我还不擅长 javascript，我想不出解决这个问题的方法。我应该调查什么？我需要一些关于在哪里继续寻找这个特定问题的指针。我正在考虑为每个按钮添加一个 id，并以某种方式从 jquery 中检索它并仅修改它，但无论如何我都无法做到。

Answer 1

下面的代码应该可以解决问题：

$(function(){
    $('#settings .onoff').click(function(){
        $(this).siblings().removeClass("on");
        $(this).addClass("on"); 
    });
});

问题是您选择了所有带有$("#settings .onoff) 的.onoff 按钮，而您只需要兄弟姐妹（同一容器中的按钮）

在这里查看我的 jsfiddle：http://jsfiddle.net/KwKjd/4/

Answer 2

这可能是微不足道的，可能无法回答问题，因为我不确定你在问什么，但你不能只在 javascript 中创建一个方法并拥有多个按钮参数。

有点像（伪代码）

function onoff(var Numberofbuttons)
{
Insert code here
}

所以如果你想制作 x 个按钮，你可以使用 for 循环？

（来自 C# 的角度）

Answer 3

只是因为你听起来像你想学习并且只是被指出而不是给出答案，所以考虑使用“this”而不是特定的类。

这会说'当它被点击时，将它设置为开/关等'......