JQuery 在两个函数之间单击/切换

我正在寻找一种方法，有两个单独的操作/函数/“代码块”运行时，点击了一些，然后一个完全不同的块，当同样的事情被点击了一次。是我组装的。我想知道是否有更有效/更优雅的方法。我知道 jQuery. toggle ()，但是它不能按照预期的方式工作。

在这里工作: Http://jsfiddle.net/reggi/fcvad/1/

var count = 0;
$("#time").click(function() {
count++;
//even odd click detect
var isEven = function(someNumber) {
return (someNumber % 2 === 0) ? true : false;
};
// on odd clicks do this
if (isEven(count) === false) {
$(this).animate({
width: "260px"
}, 1500);
}
// on even clicks do this
else if (isEven(count) === true) {
$(this).animate({
width: "30px"
}, 1500);
}
});
208558 次浏览
小开

使用两个函数和一个布尔值。这是一个模式，不是完整的代码:

 var state = false,
oddONes = function () {...},
evenOnes = function() {...};


$("#time").click(function(){
if(!state){
evenOnes();
} else {
oddOnes();
}
state = !state;
});

或者

  var cases[] = {
function evenOnes(){...},  // these could even be anonymous functions
function oddOnes(){...}    // function(){...}
};


var idx = 0; // should always be 0 or 1


$("#time").click(function(idx){cases[idx = ((idx+1)%2)]()}); // corrected

(注意，第二个是我的第一脑袋和我混合语言很多，所以确切的语法是不能保证的。应该接近真正的 Javascript。)

小开

如果你需要做的只是切换一个值，我会为你展示的代码做类似的事情:

var oddClick = true;
$("#time").click(function() {
$(this).animate({
width: oddClick ? 260 : 30
},1500);
oddClick = !oddClick;
});
小开

如果你所做的只是保持一个布尔 isEven，那么你可以考虑检查元素上是否有一个类 isEven，然后切换该类。

使用像 count 这样的共享变量是一种不好的做法。问问你自己这个变量的作用域是什么，想想如果你有10个条目想要在你的页面上切换，你会创建10个变量，或者一个数组或者变量来存储它们的状态吗？也许不会。

编辑:
JQuery 有一个 交换班方法，当与 hasClass 结合使用时，可以用它在您定义的两个宽度之间进行动画处理。这是有利的，因为您可以稍后在样式表中更改这些大小，或添加其他参数(如背景颜色或边距)来进行转换。

小开
最佳答案

JQuery 有两个称为 .toggle()的方法。

注意: 看起来至少从 JQuery 1.7开始，这个版本的 .toggle就是 不赞成，可能正是因为这个原因，即存在两个版本。使用 .toggle更改元素的可见性只是一种更常见的用法。方法为 在 jQuery 1.9中删除。

下面的例子说明了如何实现与插件相同的功能(但可能暴露出与内置版本相同的问题(参见文档的最后一段))。

(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));

演示

(免责声明: 我不认为这是最好的实现! 我打赌在性能方面它可以得到改进)

然后说:

$('#test').clickToggle(function() {
$(this).animate({
width: "260px"
}, 1500);
},
function() {
$(this).animate({
width: "30px"
}, 1500);
});

更新2:

与此同时，我为此创建了一个合适的插件。它接受任意数量的函数，可以用于任何事件。可以在 GitHub 上找到.

小开

我使用它来创建两个函数之间的切换效果。

var x = false;
$(element).on('click', function(){
if (!x){
//function
x = true;
}
else {
//function
x = false;
}
});
小开

演示

. one () 文档。

我很晚才回答，但我认为这是最短的代码，可能会有帮助。

function handler1() {
alert('First handler: ' + $(this).text());
$(this).one("click", handler2);
}
function handler2() {
alert('Second handler: ' + $(this).text());
$(this).one("click", handler1);
}
$("div").one("click", handler1);

带行动代码的 DEMO

function handler1() {
$(this).animate({
width: "260px"
}, 1500);
$(this).one("click", handler2);
}


function handler2() {
$(this).animate({
width: "30px"
}, 1500);
$(this).one("click", handler1);
}
$("#time").one("click", handler1);
小开

微型 jQuery 插件

如果你想要自己的可链接 点击切换 jQuery 方法，你可以这样做:

jQuery.fn.clickToggle = function(a, b) {
return this.on("click", function(ev) { [b, a][this.$_io ^= 1].call(this, ev) })
};


// TEST:
$('button').clickToggle(function(ev) {
$(this).text("B");
}, function(ev) {
$(this).text("A");
});
<button>A</button>
<button>A</button>
<button>A</button>


<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

简单函数切换器

现场演示

function a(){ console.log('a'); }
function b(){ console.log('b'); }


$("selector").click(function() {
return (this.tog = !this.tog) ? a() : b();
});

如果你想让它更短(怎么可能，对吧！) ，你可以使用 按位异或 < a href = “ https://developer.mozilla.org/en/Docs/Web/JavaScript/Reference/Operators/Bitwise _ Operators # Bitwise _ XOR”rel = “ noReferrer”> * Docs 操作符，如:
演示

  return (this.tog^=1) ? a() : b();

仅此而已。
诀窍是将 boolean属性 tog设置为 this对象，并使用 否定(tog = !tog)切换它
并放置所需的函数调用 在一个 一个 href = “ https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Contionary _ Operator”rel = “ norefrer”> 条件运算符 ?:


在 OP 的例子中(即使有多个元素)可能是这样的:

function a(el){ $(el).animate({width: 260}, 1500); }
function b(el){ $(el).animate({width: 30}, 1500);  }


$("selector").click(function() {
var el = this;
return (el.t = !el.t) ? a(el) : b(el);
});

ALSO : 你也可以像:
演示:

$("selector").click(function() {
$(this).animate({width: (this.tog ^= 1) ? 260 : 30 });
});

但这不是指挥所要求的他是 looking for a way to have two separate operations / functions

使用 数组，原型，反向:

注意 : 这不会存储当前的 Toggle 状态，只是在 Array 中反转我们的函数位置(它有它的用途...)

你只需要将你的 A B函数存储在一个数组中，点击你只需要反转数组顺序并执行 array[1]函数:

现场演示

function a(){ console.log("a"); }
function b(){ console.log("b"); }
var ab = [a,b];


$("selector").click(function(){
ab.reverse()[1](); // Reverse and Execute! // >> "a","b","a","b"...
});

一些混搭！

JQuery 演示
JavaScript 演示

创建一个漂亮的函数 toggleAB()，它将包含您的两个函数 把它们放到 Array 里，在数组的末尾，您只需根据从 this引用传递给函数的 tog属性分别执行函数[ 0 // 1] :

function toggleAB(){
var el = this; // `this` is the "button" Element Obj reference`
return [
function() { console.log("b"); },
function() { console.log("a"); }
][el.tog^=1]();
}


$("selector").click( toggleAB );
小开

我认为您不应该实现 toggle 方法，因为从 jQuery 1.9中删除它是有原因的。

考虑使用 jQuery 完全支持的 toggleClass:

function a(){...}
function b(){...}

例如，您的事件触发器是 onclick，所以:

第一个选择:

$('#test').on('click', function (event) {


$(this).toggleClass('toggled');


if ($(this).hasClass('toggled')) {
a();
} else{
b();
}
}

还可以将处理程序函数作为参数发送:

第二个选择:

$('#test').on('click',{handler1: a, handler2: b}, function (event) {


$(this).toggleClass('toggled');


if ($(this).hasClass('toggled')) {
event.data.handler1();
} else{
event.data.handler2();
}
}
小开

修改能够在 n 个函数之间切换的第一个答案:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus.com®">
<!-- <script src="../js/jquery.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>my stupid example</title>


</head>
<body>
<nav>
<div>b<sub>1</sub></div>
<div>b<sub>2</sub></div>
<div>b<sub>3</sub></div>
<!-- .......... -->
<div>b<sub>n</sub></div>
</nav>
<script type="text/javascript">
<!--
$(document).ready(function() {
(function($) {
$.fn.clickToggle = function() {
var ta=arguments;
this.data('toggleclicked', 0);
this.click(function() {
id= $(this).index();console.log( id );
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(ta[id], this)();
data.toggleclicked = id
});
return this;
};
}(jQuery));


    

$('nav div').clickToggle(
function() {alert('First handler');},
function() {alert('Second handler');},
function() {alert('Third handler');}
//...........how manny parameters you want.....
,function() {alert('the `n handler');}
);


});
//-->
</script>
</body>
</html>

小开

只有一个解决办法: 基本概念:

$('sth').click(function () {
let COND = $(this).propery == 'cond1' ? 'cond2' : 'cond1';
doSomeThing(COND);
})

Jsfiddle 上的例子

例1，在切换模式下更改元素的 innerHTML:

$('#clickTest1').click(function () {
$(this).html($(this).html() == 'click Me' ? 'clicked' : 'click Me');
});

例2，在“ none”和“ inline-block”之间切换显示:

$('#clickTest2, #clickTest2 > span').click(function () {
$(this).children().css('display', $(this).children().css('display') == 'inline-block' ? 'none' : 'inline-block');
});

提交答案