JavaScriptのクリックハンドラ間で変数を渡す

Question

javaScriptのクリックハンドラで変数を渡す方法。

var condition_selction = ($(this).val());を.change(function)に割り当てました。 $("#process-signs-scrap-scrapped-button-enabled").click(function() {の2番目のクリックハンドルでこの変数の値を取得する方法。

どのようにこれらの2つの機能の間で変数を渡しますか。

$('input:checkbox').change(function() { 
     /*get the parent node of the radio and then hide only its siblings*/ 
     $(this).parent('label').siblings().toggle(); 
     if ($('.sign-condition').is(':checked')) { 
      var condition_selction = ($(this).val()); 
     } 
     if ($('.sign-reason').is(':checked')) { 
      var reason_selction = ($(this).val()); 
     } 
     //Check that both select fields have a value 
     if (condition_selction != null && reason_selction != null) { 
      $("#process-signs-scrap-scrapped-button-disabled").hide(); 
      $("#process-signs-scrap-scrapped-button-enabled").show(); 
     } else { 
      $("#process-signs-scrap-scrapped-button-disabled").show(); 
      $("#process-signs-scrap-scrapped-button-enabled").hide(); 
     } 
    }); 

    $("#process-signs-scrap-scrapped-button-enabled").click(function() { 



      var process_signs_scrap_condition = condition_selction; 


      var process_signs_scrap_reason = reason_selction 


      // Open the timer modal 
      $('#process-signs-scrap-scrapped-modal').modal('show'); 

Answer 1

あなたは両方の機能に

var condition_selction; // like this 
var reason_selction; 

$('input:checkbox').change(function() { 
    /*get the parent node of the radio and then hide only its siblings*/ 
    $(this).parent('label').siblings().toggle(); 
    if ($('.sign-condition').is(':checked')) { 
     condition_selction = ($(this).val()); // removed declaration 
    } 
    if ($('.sign-reason').is(':checked')) { 
     reason_selction = ($(this).val()); 
    } 
    //Check that both select fields have a value 
    if (condition_selction != null && reason_selction != null) { 
     $("#process-signs-scrap-scrapped-button-disabled").hide(); 
     $("#process-signs-scrap-scrapped-button-enabled").show(); 
    } else { 
     $("#process-signs-scrap-scrapped-button-disabled").show(); 
     $("#process-signs-scrap-scrapped-button-enabled").hide(); 
    } 
}); 

$("#process-signs-scrap-scrapped-button-enabled").click(function() { 



     var process_signs_scrap_condition = condition_selction; 


     var process_signs_scrap_reason = reason_selction 


     // Open the timer modal 
     $('#process-signs-scrap-scrapped-modal').modal('show'); 

Answer 2

にそれらにアクセスすることができますので、あなたは、ボタンへのアクセスのonclickの上でそのデータをボタン上のデータ属性に値を渡すことができ、世界的に両方のVARを宣言属性とその良いことを行く。私はあなたのコードのいくつかを変更してサンプル版を入手しました。

$('input:checkbox').change(function() { 
 
     if ($('.sign-condition').is(':checked')) { 
 
      var condition_selction = $(this).val(); 
 
      $("#process-signs-scrap-scrapped-button-enabled").attr('data-value', condition_selction); 
 
     } 
 
    }) 
 

 
    $("#process-signs-scrap-scrapped-button-enabled").click(function() { 
 
      var condition_selction = $(this).attr('data-value'); 
 
      console.log("The value of the checkbox is " + condition_selction); 
 
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" class="sign-condition" value="sign condition" /> click me first 
 
</label> 
 
<hr/> 
 
<button type="button" data-value="" id="process-signs-scrap-scrapped-button-enabled">click me last</button>