2

在底部更新

有 4 个divs设置为toggle buttons. 当一个按钮被打开时：

- 它是一个按下按钮的动画，

-它检索一些内容并将该内容放入一个盒子中，然后

- 它返回一个值 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/））

4

2 回答 2

2

如果您使用 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);
    });
});​
于 2012-08-05T08:05:36.487 回答
2

根据新要求更新了演示：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 规则。这将完成您一次只按下一个按钮的功能，以及在不影响其他按钮的情况下打开/关闭它的能力。

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; }
于 2012-08-05T08:25:37.220 回答