Question

我基本上是在创建一个过滤按钮。如果我按下按钮1 {这将发生} 如果按下按钮2 {这将发生}

但如果我按下button1然后按下按钮2 {这必须发生}

这是我到目前为止的代码。谢谢！

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

    });

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

Answer 2

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

});

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

Answer 3

使用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

Answer 4

您可以使用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>

在jquery中按两个按钮将显示此操作

4 个答案: