为什么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);
  });

小提琴

另外，如果您想保留变量的值，只需在click事件范围之外定义它们即可，这样可以在外部进行全局访问。

看到

• .toggle
• .text（func）语法
• 不推荐使用的切换

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 不见了并且丢失了 。 如果您想要一个单击并按住的解决方案（如标题所示），则可以使用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/