ボタンがクリックされたかどうかを確認するための条件文を取得するにはどうすればよいですか？

Question

私は、別のボタンをクリックしたときに異なる結果を返す方法を見つけようとしています。私は、ユーザーが何をクリックしたかに応じて値を返す2つのボタンを持っています。私の見た目に近いコードがあります。

あなたが仕事に、このためのイベントをクリックして処理するためにイベントリスナーを追加する必要が

$(() => { 
 
    const $btn1 = $("#btn1"), 
 
     $btn2 = $("#btn2"); 
 

 
    let result = 0; 
 
    function fetchResult() { 
 
    if("button1 is clicked"){ //Of course, that isn't the condition being tested 
 
     result = 1 + 2; 
 
    } else if ("button2 is clicked") { //And neither is this 
 
     result = 3 + 4; 
 
    } else { 
 
     //do nothing 
 
    } 
 
    return result; 
 
    } 
 

 
    $("#result").html(fetchResult); 
 
});

#result { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    background: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div> 
 
    <button class="btn btn-lg" id="btn1">Button 1</button> 
 
    <button class="btn btn-lg" id="btn2">Button 2</button> 
 
    <p id="result"></p> 
 
</div>

Answer 1

：

$btn1.on('click', function() { 
    console.log('button 1 clicked'); 
}); 

$btn2.on('click', function() { 
    console.log('button 2 clicked'); 
}); 

それとも.btnクラスにイベントを追加し、どちらを決定することができます要素のIDに基づいてクリックされます：

$('.btn').on('click', function() { 
    if (this.id === 'btn1') { 
     console.log('button 1 clicked'); 
    } else if (this.id === 'btn2') { 
     console.log('button 2 clicked'); 
    } 
}); 

後者のアプローチは、おそらくあなたの特定のユースケースの方が良いでしょう。

Answer 2

$('button').click(function() { 
     alert($(this).attr('id')); 
     // or what ever your code .... 
    }); 

あなたはclickイベントでjQueryの.onメソッドを使用することができ、HTMLファイルに

Answer 3

をjQueryのタグを追加することを忘れないでください：

$("#btn1").on('click',() => { 
 
    $("#result").html(1 + 2); 
 
}); 
 
$("#btn2").on('click',() => { 
 
    $("#result").html(2 + 3); 
 
});

#result { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    background: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button class="btn btn-lg" id="btn1">Button 1</button> 
 
<button class="btn btn-lg" id="btn2">Button 2</button> 
 
<p id="result"></p>

Answer 4

何ちょうど設定した変数について一部のボタンをクリックしました。
Ofボタンが

$(() => { 
    let btn1Clicked = false, 
     btn2Clicked = false 
    const $btn1 = $("#btn1").click(()=>btn1Clicked = true), 
     $btn2 = $("#btn2").click(()=>btn2Clicked = true); 

    let result = 0; 
    function fetchResult() { 
    if(btn1Clicked){ //Of course, that isn't the condition 
     result = 1 + 2; 
    } else if (btn2Clicked) { //And this isn't the condition either 
     result = 3 + 4; 
    } else { 
     //do nothing 
    } 
    return result; 
    } 

    $(document).on('#btn1, #btn2', function(){ 
    fetchResult() 
    }) 
}); 

Answer 5

を押したときのコースは、あなたのコードでは、あなたはまた、あなたが

$(#btnId1).on('click',function(){ 
//do your thing here 
}); 
$(#btnId2).on('click',function(){ 
    //do your thing here 
});