Question

我想要一个按钮来执行两个jquery函数。第一次点击一次，然后第二次点击另一次。这是两个按钮的代码。有没有办法结合这些功能？

<input type="button" value="View Page" onclick="ViewPage()" />

<script type="text/javascript">
function ViewPage() {
example_animate('-=50%');
$("#mainContent").toggle();
}
</script>

<input type="button" value="View Menu" onclick="ViewMenu()" />

<script type="text/javascript">
function ViewMenu() {
example_animate('+=50%');
$("#mainContent").toggle();
}
</script>

Answer 1

尝试这样的事情 - DEMO

var action = 1;

$("input").on("click", viewSomething);

function viewSomething() {
    if ( action == 1 ) {
        $("body").css("background", "honeydew");
        action = 2;
    } else {
        $("body").css("background", "beige");
        action = 1;
    }
}

所以在你的情况下它将是

function viewSomething() {
    if ( action == 1 ) {
        example_animate('-=50%');
        action = 2;
    } else {
        example_animate('+=50%');
        action = 1;
    }
    $("#mainContent").toggle();
}

Answer 2

使用one方法的另一种方法，两者都只会触发一次

$("input").one("click", viewSomething);
function viewSomething()
{
    $("body").css("background", "honeydew");
    $("input").one("click", function(){ // on can be used
        $("body").css("background", "beige");
    });
}

DEMO

更新：如果您想让第二个处理程序保持活动状态，请将one替换为on，如this one。

Answer 3

您还可以为html元素指定名称..

<input type="button" value="Click me" onclick = 'viewSomething(this)'/>           
<script>
    function viewSomething(e){  

        //First time click
        if(e.name != 'Click'){
           e.name = "Click";
           <!--do whatever..-->
         }//end if

       //When click it again..
       else if(e.name == 'Click'){
           e.name = "Unclick";
           <!--do whatever-->
       }//end else
  }//end function
</script>

Answer 4

您可以使用数组存储函数，使用data计数器来跟踪索引。这非常灵活，因为你可以添加任意数量的函数，如果你继续点击它就会循环。

演示： http://jsbin.com/ehatoj/2/edit

var funcs = [
  function one() { alert('one'); },
  function two() { alert('two'); },
  function three() { alert('three'); }
];

$('button')
  .data('counter', 0) // begin counter at zero
  .click(function() {
    var counter = $(this).data('counter');
    funcs[ counter ]();
    $(this).data('counter', counter < funcs.length-1 ? ++counter : 0);
  });

Answer 5

您可以在按钮中添加一个类，以便知道该按钮应该做什么，然后在按钮具有此类的情况下测试这两个函数。当然你还需要删除viewMenu（）中的类，在jQuery v1.8.3中看起来像这样：

<input id="toggle-view" type="button" value="View Menu" class="view-page" />

$('#toggle-view').on('click', function() 
{
   var button = $(this);

   if ( button.hasClass('view-page')  ) 
   {
       ViewPage();
       button.removeClass('view-page');   
   } 
   else 
   {
        ViewMenu();
        button.addClass('view-page');
   }
});

一键一个功能，第一次点击另一个

5 个答案: