为什么jquery切换不起作用？

Question

我只想在true和false之间切换变量，并点击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中你会看到它在我点击它之前切换了按钮的存在！ 为什么会发生这种情况？我该如何解决？

Answer 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

另外，如果你想保留变量的值，只需将它们定义在click事件范围之外，这样就可以在外部访问它了。

见

• 的 .toggle
• 的 .text(func) syntax
• 的 Deprecated toggle

Answer 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

Answer 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/