4个切换按钮互相说javascript，但没有一个是好听众 [英] 4 toggle buttons speak javascript to each other but none of them are good listeners

问题描述

在底部更新

update at the bottom

有4个 divs 设置为切换按钮。切换按钮时：

There are 4 divs that are set to look like toggle buttons. When a button is toggled on:

-it动画为按下按钮，

-it is animated as a pressed button,

-it检索一些内容并将其放入一个框中，然后

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

-it将值1返回给数组。

-it returns a value of 1 to an array.

（没问题。）

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

Problem: When there is already one button button pressed, I don't understand how to toggle the first button off without also turning the other one off or affecting the other buttons. How can I pass the output of one button to the others so they know who they have to turn off when they turn on?

我的解决方案到目前为止一直在创建2个数组：

My solution thus far has been to create 2 arrays:

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

例如，如果第一个按钮在
上切换，则arrayValues = [ 1,0,0,0]

For example if the first button is toggled on arrayValues = [1,0,0,0]

现在第二个按钮已经打开，所以它说
arrayValues = [1,1,0,0]

and now the second button has been toggled on so it says arrayValues = [1,1,0,0]

但是如何将这些信息传递到所有按钮？下一部分显然存在缺陷，但这是我唯一能想到的事情：

but how can I pass that information into all of the buttons? This next part is obviously flawed but it's the only thing I could think of doing:

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

so now, the only values that are not negative are the two buttons in active states... but that does nothing for because we already knew that. How can I tell the buttons which button to subtract 1 from without affecting any of the other buttons?

更新：在上下文中看到疯狂 http://jsfiddle.net/Luhring/EjW7A/23/

Update: To see the madness in context http://jsfiddle.net/Luhring/EjW7A/23/

* 更新：*
只是为了澄清：按钮不仅仅是切换它们的外观，它们还会更改页面上显示的其他内容：
当您单击每个按钮时，内容会发生变化。每个按钮都有1个原始内容组，可以使用按钮打开/关闭。比如用遥控器改变电视屏幕上的频道。

*update: * Just to clarify: the buttons aren't only just toggling their appearances, they're changing other content displayed on the page: When you click each button the content changes. each button has 1 original group of original content that is toggled on/off with the button. like changing the channel on a tv screen with a remote control.

所以如果按下按钮1，当按下按钮2时，按钮1必须关闭（删除其内容）然后动画回到原来的位置，以便显示按钮2的内容。

so if button 1 is pressed, when button 2 is pressed button 1 must turn off (removing its' content and animating back up to its' original position) in order to allow button 2's stuff to display.

向@nbrooks大声写出4行代码，这些代码或多或少与我在+100中所做的一样多。仍然没有解决，但他的效率比我的更高（你可以在这里看到他的版本： http://jsfiddle.net / EjW7A / 20 / ））

shout out to @nbrooks for writing 4 lines of code that more or less did as much as I did in +100. Still not solved but his is WAY more efficient than mine (you can see his version here: 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');       
    });
});​

---

U. pdate to your fiddle demo

最好的方法是给元素一个公共类，你可以绑定一个单击处理程序和css规则。这将完成你的功能，一次只按一个按钮，再加上能够在不影响其他按钮的情况下打开/关闭它。

The best way to do this is just give the elements a common class, to which you can bind a click handler and a css rule. This will accomplish your function of only having one button being pressed at a time, plus the ability to turn it on/off without affecting the others.

Javascript（jQuery）：

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

这篇关于4个切换按钮互相说javascript，但没有一个是好听众的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！