javascript - 4 个切换按钮相互之间使用 javascript，但它们都不是好的倾听者

Question

在底部更新

有 4 个 div 被设置为看起来像 切换按钮。打开按钮时:

-it is animated as a pressed button,

-it retrieves some content and it places that content into a box, and then

-it returns a value of 1 to an array.

(no problem.)

问题:当已经按下一个按钮按钮时，我不明白如何在不关闭另一个按钮或影响其他按钮的情况下关闭第一个按钮。我如何才能将一个按钮的输出传递给其他按钮，以便他们知道打开时必须关闭的谁？

到目前为止，我的解决方案是创建 2 个数组:

var arrayValues [ a, b, c, d]; //the values of each button state: [0,0,0,0] <-all off | all on-> [1,1,1,1]
var addedValues = [a + b + c + d]; //the values of each array item added together: [0+0+0+0]= 0 <-all off | all on-> [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?");
}

例如，如果第一个按钮被打开 数组值 = [1,0,0,0]

现在第二个按钮已经打开所以它说 数组值 = [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 组原始内容，可通过按钮打开/关闭。就像用 Remote 改变电视屏幕上的 channel 。

因此，如果按下按钮 1，当按下按钮 2 时，按钮 1 必须关闭(移除其内容并动画回到其原始位置)，以便显示按钮 2 的内容。

感谢@nbrooks 编写了 4 行代码，这些代码或多或少与我在 +100 中所做的一样多。仍然没有解决，但他的方法比我的更有效率(你可以在这里看到他的版本:http://jsfiddle.net/EjW7A/20/))

Answer 1

Updated Demo, according to new reqs: 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');       
    });
});​

---

Update to your fiddle demo

做到这一点的最佳方法就是为元素提供一个公共(public)类，您可以将点击处理程序和 css 规则绑定(bind)到该类。这将实现一次只按下一个按钮的功能，以及在不影响其他按钮的情况下打开/关闭按钮的功能。

Javascript(jQuery):

$(function() {
    $('.plain').click(function() {
        $(this).toggleClass('selected');
         $('.selected').not(this).removeClass('selected');       
    });
});​

HTML

<div id="a" class="plain">
    <p>A</p>
</div>

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