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屋!