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");
    });
}

演示

更新:如果您想让第二个处理程序保持活动状态,请替换oneon这样处理程序。

于 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 回答