【问题标题】：Why is jquery toggle not working?为什么jquery切换不起作用？
【发布时间】：2013-06-23 05:07:55
【问题描述】：

我只想在真假之间进行变量切换，并点击button 上的文本以进行更改。这是我的 Jquery：

$("button").toggle(
  function () {
    $(this).text("Click to change to paint brush");
      var erasing = true;
  },
  function () {
    $(this).text("Click to change to eraser");
      var erasing = false;
  }
);

这对我来说看起来 100% 正确，但在我的 jsfiddle 中，您会看到它在我点击它之前切换按钮的存在！ 为什么会发生这种情况，我该如何解决？

【问题讨论】：

该切换版本在 jquery 1.8 中已更改 - stackoverflow.com/questions/14301935/…

标签： javascript jquery toggle

【解决方案1】：

此版本的切换已被弃用 (1.8) 并被删除 (1.9)。现在您需要在按钮单击本身中处理它。是这样的：

var erasing = false;
$("button").click(function () {
    erasing = !erasing;
      $(this).text(function (_, curText) {
          return curText == "Click to change to paint brush" ? "Click to change to eraser" :  "Click to change to paint brush" ;
      });
    console.log(erasing);
  });

Fiddle

另外，如果您想保留变量的值，只需将它们定义在点击事件范围之外，以便在外部访问它更加全局。

见

【讨论】：

这工作了 3 次......一旦你说切换不起作用，我就用 if 语句解决了问题
@RyanSaxe 那是因为错字......代码中的橡皮擦。 :) 它也在你的代码中。
@RyanSaxe 是的，这是因为逻辑。如果你反转条件，它仍然可以工作。
是的，我喜欢你的方法......即使我发布了一个可行的解决方案，这是一个好方法。
@RyanSaxe 查看我的更新；抛弃所有这些变量和条件。您可以使用！反转布尔值和文本的功能以翻转按钮文本。

【解决方案2】：

感谢大家解释切换是如何过时的......所以这就是我所需要的，然后我用一个简单的if 声明解决了我的问题：

var erasing = false;
var i = 0
$("button").click(function () {
    if(i%2==0){
        $(this).text("Click to change to paint brush");
        erasing = true;
    }
    else{
        $(this).text("Click to change to eraser");
        erasing = false;
    };
    i += 1
  });

jsfiddle

【讨论】：

【解决方案3】：

正如 PSL 所说，您正在寻找的 toggle is gone and lost。如果您想要点击并按住解决方案（如您的标题所示），您可以使用mouseup 和mousedown。

 var erasing;
 $("button").on({
    "mousedown": function () {
        $(this).text("Click to change to paint brush");
        erasing = true;
    },
    "mouseup mouseleave": function () {
        $(this).text("Click to change to eraser");
        erasing = false;
    }
});

演示：http://jsfiddle.net/hungerpain/ymeYv/6/

【讨论】：

这不起作用，因为它不会在点击时在它们之间切换。另外，保留的东西是针对不同的问题，我一定是在错误的标签中