更改JavaScript/jQuery中切换的状态

更改JavaScript/jQuery中切换的状态,javascript,html,toggle,jquery,Javascript,Html,Toggle,Jquery,是否可以更改切换功能的状态?比如: myDiv.toggle。。。功能1,功能2 我点击myDiv元素,函数1就会执行 我再次单击功能2 我再次单击功能1 但是 改变状态 功能1 等 但是我需要能够从切换功能外部更改状态。切换功能适用于简单的用例。从外部改变状态不再简单 您无法轻松/安全地将其设置为内部变量,因此在次要版本中可能会发生更改。您可以轻松访问切换函数的状态变量,因为它存储在元素的内部数据集中 如果您确实想这样做,您可以尝试以下代码: $._data(ELEMENT, "lastTog

是否可以更改切换功能的状态?比如:

myDiv.toggle。。。功能1,功能2

我点击myDiv元素,函数1就会执行 我再次单击功能2 我再次单击功能1 但是 改变状态 功能1 等
但是我需要能够从切换功能外部更改状态。

切换功能适用于简单的用例。从外部改变状态不再简单

您无法轻松/安全地将其设置为内部变量,因此在次要版本中可能会发生更改。您可以轻松访问切换函数的状态变量,因为它存储在元素的内部数据集中

如果您确实想这样做,您可以尝试以下代码:

$._data(ELEMENT, "lastToggle" + func.guid, 0);
func是传递给.toggle的函数,因此需要将此函数保存在变量中。下面是一个简单的例子:


然而,由于函数内部有一个var guid=fn.guid | | jQuery.guid++语句,我不知何故认为devs实际上是想对_数据键使用guid而不是func.guid-在这种情况下,一个小的更新很可能会破坏一切。修复后,您必须迭代数据集以检索正确的密钥,因为无法从外部访问guid。

这里有一个javascript对象,它使用闭包跟踪其状态并切换:

    var TOGGLER = function() {
      var _state = true;
      var _msg = "function1";

        var function1 = function() {
            _msg = "function1";
        }

        var function2 = function() {
            _msg = "function2";
        }

      return {
        toggle: (function () {
            _state = !_state;

            if (_state) {
                function1();    
            } else {
                function2();
            } 

            return _msg;
        })
       }
     }();
下面是一个JSFIDLE,它展示了如何使用它来基于以下jquery进行切换:


你已经试过一些代码了吗?什么?你能给出一个你想要实现的伪代码例子,或者更好的解释吗?当涉及到第4步时,你的问题有点让人困惑。我明白了。所以我认为通过变量或id为的空div进行自定义切换更简单。。。当jQuery可用时,为什么还要使用document.getElementById之类的东西?!实际上,您将其与jQuery函数混合使用,因此您的代码根本无法工作!下面是一个有效的例子:-但正如我在回答中所说的,不要使用它!它访问的内部可能会在某个时刻发生变化。哦,我刚刚看到这是您自己尝试编写的切换程序。。。无论如何,先学习一些JS语法,然后不要滥用类来获取状态信息,而是使用jQuery的.data方法。我通常用其他语言编写代码,我已经有一年没有使用JavaScript/jQuery了,很抱歉,我缺乏基本知识。这没有提供重置状态的方法。@ThiefMaster我刚刚在TOGGLER函数中定义了_state变量,现在我也可以从其他函数中更改它,如果这就是你的意思。这会给你一个全局变量——最好在toggle方法之外再导出一个reset方法,并将实际状态变量保存在闭包中。
  $(document).ready(function() {
     $("#search").click(function() {
         var message = TOGGLER.toggle();
         $("#state").text(message);
     });
 });