4个切换按钮互相说javascript，但没有一个是好听众
在底部更新
有4个divs设置为toggle buttons 。 切换按钮时：
-it被动画为按下的按钮，
-it检索一些内容，然后将该内容放入一个框中，然后
-it将值1返回给数组。
（没问题。）
问题：当按下一个按钮按钮时，我不明白如何关闭第一个按钮而不关闭另一个按钮或影响其他按钮。 如何将一个按钮的输出传递给其他按钮，以便他们知道在打开电源时必须关闭谁 ？
到目前为止，我的解决方案是创建2个数组：
var arrayValues [ a, b, c, d]; //the values of each button state: [0,0,0,0] [1,1,1,1] var addedValues = [a + b + c + d]; //the values of each array item added together: [0+0+0+0]= 0 [1,1,1,1]=4
然后
if (addedValues = 0) { console.log("cool, nothing is pressed yet. I am going to return true, but where does that return value go? How can I access it?"); return true; } else if (addedValues > 1) { console.log("ok I now know that at least one button has already been pressed, but how can I tell the other buttons which one was already pressed?"); }
例如，如果在arrayValues = [1,0,0,0]上切换第一个按钮
现在第二个按钮已经切换，所以它表示arrayValues = [1,1,0,0]
但是如何将这些信息传递到所有按钮中呢？ 下一部分显然存在缺陷，但这是我唯一能想到的事情：
} else if(addedValues >= 2) { arrayValues[0] = arrayValues[0] - 1; arrayValues[1] = arrayValues[1] - 1; arrayValues[2] = arrayValues[2] - 1; arrayValues[3] = arrayValues[3] - 1; }
现在，唯一不是负面的值是处于活动状态的两个按钮……但这对我们已经知道的情况没有任何帮助。 如何告诉按钮哪个按钮减去1而不影响任何其他按钮？
更新 ：在上下文中看到疯狂http://jsfiddle.net/Luhring/EjW7A/23/
* 更新：*只是为了澄清：按钮不仅仅是切换它们的外观，它们还在更改页面上显示的其他内容：当您单击每个按钮时，内容会发生变化。 每个按钮都有1个原始内容组，可以使用按钮打开/关闭。 比如用遥控器改变电视屏幕上的频道。
因此，如果按下按钮1，当按下按钮2时，按钮1必须关闭（移除其内容并动画回到其原始位置），以便允许显示按钮2的内容。
向@nbrooks大声写了4行代码，这些代码或多或少与我在+100中所做的一样多。 仍然没有解决，但他的效率比我的更高（你可以在这里看到他的版本： http ： //jsfiddle.net/EjW7A/20/ ））
根据新的要求更新了演示： http ： //jsfiddle.net/EjW7A/24/
$(function() { $('.plain').click(function() { var newClassName = $(this).is('.selected') ? '' : this.id; if ($(this).is('#content')) return; $(this).toggleClass('selected', 1000); $('#content').attr('class', 'plain '+newClassName); $('.selected').not(this).removeClass('selected'); }); });
更新您的小提琴演示
执行此操作的最佳方法是为元素提供一个公共类，您可以将单击处理程序和css规则绑定到该类。 这将实现您的function，即一次只按一个按钮，以及打开/关闭它而不影响其他按钮的function。
Javascript（jQuery）：
$(function() { $('.plain').click(function() { $(this).toggleClass('selected'); $('.selected').not(this).removeClass('selected'); }); });
HTML
A
CSS
.plain { width: 200px; height: 200px; margin: 20px; text-align:center; float: left; font-size: 100px; color:#fff; background-color:red; } p { margin-top: 25%; margin-bottom:25%; } .selected { background-color: blue; }
如果您正在使用JavaScript进行提交，那么这应该是一个更简单的方法： http ： //jsfiddle.net/EjW7A/15/
HTML
A
B
JavaScript的
jQuery(function() { jQuery(".toggleButton").click(function() { jQuery(".toggleButtonToggled").removeClass("toggleButtonToggled"); jQuery(this).addClass("toggleButtonToggled"); }); jQuery("#test").click(function() { var value = jQuery(".toggleButtonToggled:first").attr('id'); alert("Toggled button is: "+ value); }); });