我如何獲得條件（如果/其他）來檢查是否單擊了按鈕？

Question

我試圖找出一種方法，如果單擊其他按鈕，則返回不同結果。 我有兩個按鈕，這些按鈕將根據用戶單擊的內容返回值。 這是與我的代碼相似的代碼。

 $(() => { 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

您可以將jQuery .on方法與click事件一起使用：

 $("#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 3

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

不要忘記在HTML文件中添加jQuery標簽

Answer 4

單擊某個按鈕時只設置變量呢。
當然，在您的代碼中，您還需要運行一個函數，當按下按鈕時，該函數會將結果發送到屏幕

$(() => {
  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

您可以將onclick事件分別分配給兩個按鈕，例如

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