2

下部で更新

divsのように設定されている4つがありますtoggle buttons。ボタンがオンになっている場合：

-押されたボタンとしてアニメーション化され、

-一部のコンテンツを取得し、そのコンテンツをボックスに配置してから、

-値1を配列に返します。

（問題なし。）

問題： すでに1つのボタンボタンが押されている場合、他のボタンをオフにしたり、他のボタンに影響を与えたりせずに、最初のボタンをオフに切り替える方法がわかりません。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]で最初のボタンが切り替えられた場合

これで、2番目のボタンがオンになり、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;

}

だから今、負ではない唯一の値はアクティブな状態の2つのボタンです...しかし、私たちはすでにそれを知っていたので、それは何の役にも立ちません。他のボタンに影響を与えずに、どのボタンから1を引くかをボタンに指示するにはどうすればよいですか？

更新：コンテキストで狂気を確認するにはhttp://jsfiddle.net/Luhring/EjW7A/23/

*更新：* 明確にするために：ボタンは外観を切り替えるだけでなく、ページに表示される他のコンテンツを変更します。各ボタンをクリックすると、コンテンツが変更されます。各ボタンには、ボタンでオン/オフを切り替えるオリジナルコンテンツのオリジナルグループが1つあります。リモコンでテレビ画面のチャンネルを変更するようなものです。

したがって、ボタン1が押された場合、ボタン2が押されたときに、ボタン2の内容を表示できるようにするには、ボタン1をオフにする（コンテンツを削除して元の位置にアニメーションで戻す）必要があります。

+100で行ったのとほぼ同じくらいの4行のコードを記述してくれた@nbrooksに叫んでください。まだ解決されていませんが、彼は私のものよりもはるかに効率的です（彼のバージョンはここで見ることができます：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ルールをバインドできます。これにより、一度に1つのボタンだけを押すという機能に加えて、他のボタンに影響を与えることなくボタンをオン/オフにする機能が実現します。

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 に答える