1

我一直在搞乱一些代码（感谢@JohnieHjelm！）我找到了切换按钮。我将它减少到我需要的最低限度并将其包含在我的页面中。效果很好，一键搞定。当按钮不止一个时，问题就来了。它开始看起来不错，但随后就出错了，正如您在上一个链接中看到的那样：

<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 中检索它并仅修改它，但无论如何我都无法做到。

4

3 回答 3

1

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

这将做的是说'当单击它时，将其设置为开/关等'......

于 2013-03-15T18:31:03.117 回答
1

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

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

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

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

于 2013-03-15T18:27:06.273 回答
1

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

有点像（伪代码）

function onoff(var Numberofbuttons)
{
Insert code here
}

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

（来自 C# 的角度）

于 2013-03-15T18:27:47.923 回答