点击 jQuery 中的两个按钮将显示此操作。

Question

我正在创建一个筛选按钮。 如果我按下button1 {将发生这种情况} 如果我按下button2 {将发生这种情况}

但是如果我先按下button1，然后再按下button2 {将会发生这种情况}

这是我目前的代码。谢谢！

$(document).ready(function() {
       if($('#button1').click(function() &&   $('#button2').click(function()){
           //perform actions

    });

- Charles Xavier

---

你可以为每个按钮设置两个点击函数，然后只需设置变量来指示按钮点击，并在点击处理程序中执行所需操作。 - Huangism

Answer 1

这里是逻辑

button 1 handler {
    set var to indicate click
    do what you need
}

button 2 handler {
    check var  to see if button 1 is clicked
    do whatever you need based on the var check
}

这只处理了按钮1的点击，然后是2的点击，但你可以理解并且应该能够弄清楚如果按钮2被点击那么就是1。

- Huangism

Answer 2

尝试使用data-attribute来实现这个。

$('#button1').click(function(){
   alert('button one clicked');
   $(this).data('lastClicked',true);
 });

 $('#button2').click(function(){
   if(!!$('#button1').data('lastClicked')){
     alert('Button 1 then button 2')
   }else{
     alert('button two clicked');
   }
 });
$("body > *").not("#button1").click(function(){
  $('#button1').data('lastClicked',false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Button 1 </button>
<button id="button2"> Button 2</button>
<button id="button3"> Button 3</button>

如果你注意到有任何点击不在#button1上，那么下一次点击将不被视为button1 --> button2

- Ryad Boubaker

Answer 3

你可以使用jQuery .data()保存有关点击状态的数据，然后在其他处理程序中使用它。就像这样：

$('.js-button-1').on('click', function() {
    $(this).data('clicked', true);
    $('.js-result').text('Button 1 is clicked');
});
  
$('.js-button-2').on('click', function() {
    if ($('.js-button-1').data('clicked')) {
        $('.js-result').text('Button 1 + Button 2 are clicked');
    } else {
        $('.js-result').text('Button 2 is clicked');
    }
});

$('.js-button-clear').on('click', function() {
    $('.js-button-1').data('clicked', false);
    $('.js-result').text('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="js-button-1">Button 1</button>
<button class="js-button-2">Button 2</button>
<button class="js-button-clear">Clear</button>

<div>
    <span>Result: </span>
    <span class="js-result"></span>
</div>

- sergdenisov

Answer 4

$(document).ready(function() {
    $('#button1').click(function(){
           //perform regular button1 actions
           var btn1clicked=true;
    });
    $('#button2').click(function(){
           //perform regular button2 actions
           if(btn1clicked){
           //perform button2 clicked after button1 was clicked action
           }
    });

});

当第一个按钮被点击后，您需要设置一个变量。然后当第二个按钮被点击时，检查该变量是否已设置，如果已设置，则执行特殊操作。

- L L