jQuery 一个按钮一个功能第一次点击另一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13388017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
one button one function on first click another on second
提问by Altered
I would like one button to perform two jquery functions. One on the first click then the other on the second click. Here is the code for the two buttons. Is there a way to combine the functions?
我想要一个按钮来执行两个 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>
回答by Zoltan Toth
Try something like this - DEMO
尝试这样的事情 - 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;
}
}
So in your case it will be
所以在你的情况下它将是
function viewSomething() {
if ( action == 1 ) {
example_animate('-=50%');
action = 2;
} else {
example_animate('+=50%');
action = 1;
}
$("#mainContent").toggle();
}
回答by Tapasit Suesasiton
You can also assign a name to html element..
您还可以为 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>
回答by The Alpha
Another way using onemethod, both will fire only once
另一种使用one方法的方式，两者都只会触发一次
$("input").one("click", viewSomething);
function viewSomething()
{
$("body").css("background", "honeydew");
$("input").one("click", function(){ // on can be used
$("body").css("background", "beige");
});
}
DEMO.
演示。
Update:If you want to keep the second handler alive then replace onewith onlike this one.
更新：如果你想保持第二处理活着然后替换one用on像这一个。
回答by elclanrs
You could use an array to store your functions and a counter with datato track the index. This is very flexible because you can add as many functions as you like and it'll loop if you keep clicking.
您可以使用一个数组来存储您的函数，并使用一个计数器data来跟踪索引。这非常灵活，因为您可以添加任意数量的功能，并且如果您继续单击它会循环播放。
Demo:http://jsbin.com/ehatoj/2/edit
演示：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);
});
回答by wakooka
You could add a class to your button so you know what the button should do, and then test in both functions if the button has this class or not. Of course you will also need to remove the class in viewMenu(), that would look like this in jQuery v1.8.3 :
你可以给你的按钮添加一个类，这样你就知道按钮应该做什么，然后在这两个函数中测试按钮是否有这个类。当然，您还需要删除 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');
}
});
