別のボタンをクリックした後、どこかをクリックしたときにのみ関数が呼び出されるようにしたいと思います(他の場所をクリックしたときにこのボタンが「下」になっているとしましょう)。
どうすればこれを達成できますか?
別のボタンをクリックした後、どこかをクリックしたときにのみ関数が呼び出されるようにしたいと思います(他の場所をクリックしたときにこのボタンが「下」になっているとしましょう)。
どうすればこれを達成できますか?
最初のボタンのclick
イベントハンドラーで、フラグをに設定しtrue
ます。2番目のボタンのclick
イベントハンドラーで、フラグがであるかどうかを確認してからtrue
、ロジックを実行します。
var button1Clicked = false; // what you call "down"
$('#button1').click(function() { button1Clicked = true });
$('#button2').click(function() { if (button1Clicked) { /* magic */ });
以前に他のクリックが発生したかどうかを確認するには、それを変数に格納します。
var firstButtonClicked = false;
firstButton.on("click", function() { firstButtonClicked = true; });
secondButton.on("click", function() {
if (firstButtonClicked) {
// do something
} else {
alert("You need to click the other button first");
}
});
いずれの場合も、最初に1つのボタンをクリックする必要があるというフィードバックをユーザーに提供する必要があります。最善の解決策は、2番目のボタンをに設定しdisabled
、説明ラベルが付いている最初のボタンからアクティブにすることです。
最初のボタンが初めてクリックされたときに、2番目のボタンのクリックハンドラーをバインドするだけです。このように、この関数は最初のボタンがクリックされるまで存在しません。
$('#button1').one('click', function() {
// Do stuff for first button's click
// Create second click handler to be called when second button clicked
$('#button2').click(function() {
// Do stuff for second button's click
});
});
次のように、クラスを使用してボタンの状態を判別できます。
$('button').on('click', function(e){
$(this).toggleClass('long');
return false;
});
$(document).on('click', function(){
$('.long').removeClass('long');
});