最初のボタンをトリガした後にのみ2番目のボタンをトリガする方法

Question

2番目のボタンクリックイベントは、最初のボタンクリックイベントが機能した後にのみ機能するようにします。 2番目のボタンのクリックイベントは、最初のボタンをクリックする前に機能してはなりません。

<div class = "panel1"> 
<button>button1</button> 
<p>Button 1 triggered</p> 
</div> 
<div class = "panel2"> 
<button>button1</button> 
<p>Button 2 triggered</p> 
</div> 

p{ 
display:none; 
} 


    $(document).ready(function(){ 
    $("button").click(function(){ 
    $(this).siblings("p").toggle(); 
     }); 
    }) 

JSFiddle Link

Answer 1

以下の解決策を見つけるしてください：

https://jsfiddle.net/q8cyd2mr/6/

HTMLの一部を：

<div class = "panel1"> 
     <button>button1</button> 
     <p>Button 1 triggered</p> 
    </div> 
    <div class = "panel2"> 
     <button>button2</button> 
     <p>Button 2 triggered</p> 
</div> 

JSの一部：

$(document).ready(function(){ 
    $(".panel2 button").prop('disabled', true); 
    $("button").click(function(){ 
     $(this).siblings("p").toggle(); 
     if($(this).parent().prop("class")=='panel1'){ 
      $(".panel2 button").prop('disabled', false); 
     } 
    }); 
}); 

Answer 2

あなたは無効になり、プロパティを使用して問題を解決することができます。

$(document).ready(function() { 
    $(button2).prop('disabled', true); 
    $(button1).click(function() { 
     $(button2).prop('disabled', false); 
    }); 
}); 

Answer 3

$(".firstbutton").on("click", function(evt){ 
// custon script 
    $("#secondbutton").trigger("click"); 
}); 

Answer 4

私はデフォルトでは無効番目のボタンを作ることによって開始します。その後、ユーザーが最初のボタンをクリックした後で有効にします。私はそれがどのように見えるかのコードをあなたに提供しました。

HTML：

<div class = "panel1"> 
    <button>button1</button> 
    <p>Button 1 triggered</p> 
</div> 
<div class = "panel2"> 
    <button disabled>button1</button> 
    <p>Button 2 triggered</p> 
</div> 

CSS：

p{ 
    display: none; 
} 

Javascriptを：

$(document).ready(function(){ 
    $(".panel1 button").click(function(){ 
     $(this).siblings("p").toggle(); 
     $(".panel2 button").prop("disabled", false); 
    }); 
    $(".panel2 button").click(function(){ 
     $(this).siblings("p").toggle(); 
    }); 
}) 

Answer 5

はい、あなたが唯一の最初のボタンのクリックイベントの後に動作するように第二ボタンのクリックイベントを行うことができますこのように：

$(document).ready(function(){ 
    $(".panel1 button").click(function(){ 
     $(this).siblings("p").toggle(); 
     $(".panel2 button").click(function(){ 
      $(this).siblings("p").toggle(); 
     }); 
    }); 
}) 

Answer 6

ブール変数を保持し、2番目のメソッドを実行する前にその真偽をチェックすることができます。実行後に再度falseにし、最初のボタンクリックイベントメソッドで有効にします。