2016-10-21 8 views
0

初心者ご質問をお許しください。2つのブートストラップボタンを選択した場合のトリガー機能(JavaScript)

私は、次のテンプレートを使用して働いています:私がやりたい何 http://www.prepbootstrap.com/bootstrap-template/multi-select-buttons

は、2つの特定のボタンがクリックされた場合は、別のページにリダイレクトされます。 解決方法:

1)クリックしたときにボタンに関連付けられたdivに「アクティブ」クラスを追加します。 data-toggle = "button"が含まれているため、activateクラスが自動的に追加されるので、これは不要です。 これは本当ですか、それともactivateクラスを追加する必要がありますか?

<button onclick="activate()"> 

、その後、JSファイルで、

function activate() { 
    (this).toggleClass("active"); 
    }; 

2)トリガ、彼らがクリックされている/選択したアクティブクラス(すなわちを持っている2つの特定のボタンの場合機能(リダイレクト))。

そうするために: 私が最初にそれらを区別するために個別のIDを持つdiv要素で各ボタンを囲みます:例えば、私は<button id="car"></div>

セカンドで車のボタンを囲むだろう、私は次の関数を追加します要件が満たされている場合はリダイレクトしてください:

function redirect() { 
if document.getElementById("car").hasClass('active') && (document.getElementById("truck").hasClass('active')=== true) 
{ 
location.href = "http://www.google.com"; 
} 
}; 

私は正しい道にいるかどうか教えてください。

私のnoobのソリューションが過度に冗長である場合は、申し訳ありませんおかげで再び、アンドレ

+0

あなたは*されている必要なものチェックボックス*はボタンのように見えます。 – Robert

答えて

0

この は、それぞれが、ボタンがアクティブなクラスがすでに有効になっているかどうかを チェックをクリックされるたびにカウント変数 とを割り当てるID 箱与えてみてくださいそうでない場合 既に有効になっている場合は、count--を入れます。 classNameをアクティブに変更しないで、カウントを1ずつ増やします。カウント++; と同時に、リダイレクト機能を実装している場合は、カウント値が2かどうかを確認してください。私はあまりにも複雑な何かを探していたよう 例えば、

var count=0; 
function activate() { 
    if(this.className=="active"){ 
     (this).toggleClass("active"); 
     count--; 
    }else{ 
     (this).toggleClass("active"); 
     count++; 
    } 
    if(count>1){ 
     //implement redirect function 
    } 
}; 
+0

ありがとうロバート、試してみましょう! – Andre

+0

私はロバート・ –

+1

申し訳Santhoshないよ、と私の問題は、また私のリダイレクト機能に関係しているよう – Andre

0

は思えます。私のチェックボックスボタンをクリックすると、既に「アクティブ」クラスをトリガしているので、私がしなければならなかったすべては、このように、私のリダイレクト機能を修正することでした。助けを

<script type="text/javascript"> 
    function redirect() { 
if ((document.getElementById('car').classList.contains('active')) && (document.getElementById('truck').classList.contains('active')) == true) { 
    window.location = "https://www.websitetoredirecto.com"; 
}; 
    }; 
</script> 

おかげで、アンドレ

関連する問題