如何获取条件(If / Else)以检查是否单击了按钮?

时间:2017-03-21 19:31:18

标签: javascript jquery html css

如果点击了不同的按钮,我试图想出一种返回不同结果的方法。我有两个按钮,根据用户点击的内容返回值。这是一个接近我的样子的代码。



$(() => {
  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>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:2)

您必须添加一个事件侦听器来处理点击事件才能使其正常工作:

$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');
   }
});

后一种方法可能对您的特定用例更好。

答案 1 :(得分:2)

您可以在.on事件中使用jQuery click方法:

&#13;
&#13;
SELECT * FROM books b 
LEFT JOIN favourites f ON f.book_id = b.id 
LEFT JOIN users u ON u.id = f.user_id 
WHERE u.id = 1
&#13;
$("#btn1").on('click', () => {
    $("#result").html(1 + 2);
});
$("#btn2").on('click', () => {
    $("#result").html(2 + 3);
});
&#13;
#result {
    text-align: center;
    font-size: 30px;
    background: green;
}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

    var dead-letterReceiver = await receiverFactory.CreateMessageReceiverAsync(
            QueueClient.FormatDeadLetterPath(queueName), ReceiveMode.PeekLock);
    while (true)
    {
        var msg = await dead-letterReceiver.ReceiveAsync(TimeSpan.Zero);
        if (msg != null)
        {
            foreach (var prop in msg.Properties)
            {
                Console.WriteLine("{0}={1}", prop.Key, prop.Value);
            }
            await msg.CompleteAsync();
        }
        else
        {
            break;
        }
    }
}

不要忘记在html文件中添加jQuery标记

答案 3 :(得分:0)

当点击某个按钮时,只需设置变量即可 当然,在您的代码中,您还需要运行一个函数,在按下按钮时将结果发送到屏幕

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

答案 4 :(得分:0)

你可以单独为这两个按钮分配onclick事件,如

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