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

我正在寻找一种方法，在单击某个对象时运行两个单独的操作/函数/“代码块”，然后在再次单击同一对象时运行一个完全不同的块。我把这些放在一起。我想知道是否有更有效/优雅的方式。我知道jQuery，但它有点糟糕

在这里工作：

---

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

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

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

或

---

（请注意，第二个是我脑子里想不到的，我经常混合各种语言，因此无法保证准确的语法。应该接近真实的Javascript。）

如果您只需要切换一个值，我会对您显示的代码执行类似的操作：

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

---

如果您所做的是保持布尔<代码> ISBIG/<代码>，那么您可以考虑检查类<代码>甚至<<代码>是否在元素上，然后切换该类。

使用像count这样的共享变量是一种不好的做法。问问自己这个变量的范围是什么，想想如果你有10个你想在你的页面上切换的项目，你会创建10个变量，还是一个或多个数组来存储它们的状态？可能不会

编辑：

---

jQuery有一个方法，当与hasClass结合使用时，可以使用该方法在您定义的两个宽度之间设置动画。这是有利的，因为您可以稍后在样式表中更改这些大小或添加其他参数（如背景色或边距）以进行转换。

jQuery有两种方法称为

.toggle（）

。单击事件的操作完全符合您的要求

注意：至少从jQuery 1.7开始，这个版本的

.toggle

被弃用了，可能正是因为这个原因，即存在两个版本。使用

.toggle

更改元素的可见性只是一种更常见的用法。该方法在jQuery 1.9中被删除

下面是一个示例，说明如何实现与插件相同的功能（但可能会暴露与内置版本相同的问题（请参阅文档中的最后一段））

---

（免责声明：我不是说这是最好的实现！我打赌它在性能方面可以改进）

然后用以下词语来称呼它：

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

更新2:

---

同时，我为此创建了一个合适的插件。它接受任意数量的函数，可用于任何事件

我用它在两个函数之间创建了切换效果

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

文件

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

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

微jQuery插件 如果您想要自己的可链接点击切换jQuery方法，您可以这样做：

jQuery.fn.clickToggle=函数（a，b）{
返回this.on（“单击”，函数（ev）{[b，a][this.$\u io^=1]。调用（this，ev）}）
};
//测试：
$（“按钮”）。单击切换（功能（ev）{
$（本条文本（“B”）；
}，功能（ev）{
$（本）.text（“A”）；
});
A
A.
A.
我认为您不应该实现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个功能之间切换：



我愚蠢的例子
b1
b2
b3
bn
单线解决方案：
基本思想：

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


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

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

示例2，在“无”和“内联块”之间切换显示：

toggle（）
并不糟糕，它只是没有做你需要的事情；）检查我的答案这个代码帮助很大。谢谢除了语法错误，第二个错误也不起作用。您可以调用
$（“#time”）。只需单击（..）
一次即可设置要调用的函数。只需另一个匿名函数来调用正确的大小写即可。@ThomasReggi:谢谢您的更新。我写这篇文章时已经很晚了；）但是，没有必要使用
this.each
，特别是因为这将为每个元素创建
funcs
数组和新的事件处理程序函数。修复并添加了演示。我不明白。。。为什么不直接使用？你甚至在回答中提到了。。。也许您应该突出显示该部分，因为它是本机jQuery方法。@jlcd:这就是为什么我将其放在答案的开头。我编辑了我的答案以强调它，你认为现在更好吗？TBH，我编写了代码，后来发现了另一个
.toggle
方法。不过我不想扔掉那个代码……检查我的答案@Syed:当然，只需设置
数据。将元素的
切换到要重置的索引。@urjitonrails很高兴它能帮上忙：）这是一个很好的解决方案。干杯，伙计！这是完美的，直到今天！惊人的解决方案！！！从不知道
.one（）
方法，但它非常有用。感谢这部作品的独特元素。我建议删除oddClick部分，并将
宽度：
-行替换为
宽度：$（this）.width（）==30？260:30
。谢谢：）非常有用！妙极了！谢谢，我大部分都懂。但我不明白“tog”是从哪里来的？el.tog^=1如何在0和1之间交替变化？太多了appreciated@koz
.tog
只是我们添加到
这个
对象中的一个属性。就像您在say
Person.name=“koz”
Person是一个对象中所做的那样，您指定了一个
name
属性，而不是一个值。更多关于XOR运算符的信息，请点击此处：（您可以在我的答案中找到相同的链接；）@RokoC.Buljan thnx获得回复，非常感谢。我看了链接，但它没有解释我想理解的数学。I u
$('#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();
    }
}

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

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

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