使用 Jquery 通过单个链接调用不同的函数答案

【问题标题】：Using Jquery calling different functions with a singe link使用 Jquery 通过单个链接调用不同的函数
【发布时间】：2009-05-29 06:07:08
【问题描述】：

我想用一个 href 链接来调用不同的函数。

第一次点击它应该调用 first_function()，第二次点击它应该调用 second_function。
就像使用相同链接在两个函数之间切换一样。建议最好的方法。

Jquery 代码：

$(function() {

 var IntervalId;

 function first_function() {
  //code goes here
 }; 

 function second_function(){  
  //code goes here
 }  

$("#link2").click((function(){
second_function();
}));

$("#link1").click((function(){
first_function();
}));

});

HTML 代码：

<a href="javascript:void(0);" id="link2">Call function2</a>
<a href="javascript:void(0);" id="link1">Call function1</a>

【问题讨论】：

你为什么不直接在问题中添加那个位？ :) 那就是它所属的地方。
你的非 js 用户会发生什么？您拥有的链接不会将它们带到任何地方。使用 jquery 来增强应用程序，而不是作为使其工作的工具。
哦，顺便说一句。立即提出完整的问题要有效得多。也许你应该从这个问题中获取信息，看看你能做到多远，然后提出一个描述新问题的新问题。

标签： javascript jquery html

【解决方案1】：

“就像使用同一链接在两个功能之间切换一样。”

$("#link1").toggle(
 function first_function() {
  // Code goes here 
 },
 function second_function(){  
  // Code goes here 
 }  
);

来自toggle(fn1, fn2, [fn3, [fn4, [...]]]) 上的 jQuery 文档：

每隔一次点击在两个或多个函数调用之间切换一次。

【讨论】：

忘了切换 :)
visualjquery.com 非常有助于找到您从未知道的功能。
感谢 Tomalak 的链接。我已经用更多信息更新了这个问题。看看吧。

【解决方案2】：

Javascript：

$(document).ready(function() {
    function first_function() {
        // Code goes here 
    }; 

    function second_function(){  
        // Code goes here 
    }

    $("#link").toggle(first_function, second_function);
});

HTML：

<!-- I'm pretty sure that <a> isn't the right tag for this. -->
<button id="link">Toggle between the two functions.</button>

【讨论】：

gs 你能解释一下为什么按钮比标签更正确吗？
是一个应该打开另一个页面而不是执行javascript的链接。您当然可以使用任何其他元素，例如或
.

【解决方案3】：

最简单的方法是

var performFirstAction = true;

$(function() {

 function first_function() {
  // Code goes here 
 } 

 function second_function(){  
  // Code goes here 
 }  

 $("#link1").click(function(){
  if(performFirstAction) {
    first_function(); performFirstAction = false; }
  else {
    second_function(); performFirstAction = true; }
 });
});

或者像 Tomalak 提到的那样使用切换，

$(function() {

 function first_function() {
  // Code goes here 
 } 

 function second_function(){  
  // Code goes here 
 }  

 $("#link1").toggle(
   first_function,
   second_function
 );
});

【讨论】：