6

我想要一个按钮来执行两个 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>
4

5 回答 5

18

尝试这样的事情 -演示

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();
}
于 2012-11-14T21:59:45.857 回答
1

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

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

演示。

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

于 2012-11-14T22:05:33.277 回答
1

您还可以为 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>
于 2015-12-25T16:01:19.470 回答
0

你可以给你的按钮添加一个类，这样你就知道按钮应该做什么，然后在这两个函数中测试按钮是否有这个类。当然，您还需要删除 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');
   }
});
于 2012-11-14T22:11:39.887 回答
0

你可以使用一个数组来存储你的函数和一个计数器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);
  });
于 2012-11-14T22:06:20.270 回答