Question

在底部更新

有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] <-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]

现在第二个按钮已经切换，所以它说 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/））

Answer 1

如果您使用JavaScript进行提交，那么这应该是一种更简单的方法：http://jsfiddle.net/EjW7A/15/

<强> HTML

<div id="a" class="a1 toggleButton">
    <p>A</p>
</div>

<div id="b" class="b1 toggleButton">
    <p>B</p>
</div>

<button id ="test">test</button>

<强>的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);
    });
});

Answer 2

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

执行此操作的最佳方法是为元素提供一个公共类，您可以将单击处理程序和css规则绑定到该类。这将完成你的功能，一次只按一个按钮，再加上能够打开/关闭它而不影响其他按钮。

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，但没有一个是好听众

2 个答案: