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

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

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

请在此处查看我的jsfiddle：http://jsfiddle.net/KwKjd/4/

Answer 2

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

有点像（伪代码）

function onoff(var Numberofbuttons)
{
Insert code here
}

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

（来自C＃观点）

Answer 3

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

这样做会说'当点击它时，将其设置为打开/关闭等'...