使用 jQuery 在无限循环中单击按钮时更改按钮的内容

Question

我想创建一个按钮，在单击时更改其内容，但当我再次单击时，内容必须返回到其初始外观。我已经成功创建了一个 jQuery 代码，它更改了内容，但需要第二次单击部分的帮助。我的目标是这个按钮有两个条件，并根据单击时的活动条件切换到第二个条件。

$("#changeArrow").click(function(){

  var textShowing = true;

  if (textShowing == true){

    $("#changeArrow").html(function(){

      return "This is some text! ⊗";

      textShowing = false;

    });

  }

  else {

    $("#changeArrow").html(function(){

      return "This is some text! ⊕";

      textShowing = true;

    });

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="changeArrow">This is some text! &oplus;</button>

Answer 1

一种方法是提供一个函数来html()检查当前内容是什么并基于该内容返回新内容，如下所示：$("#changeArrow").click(function() {&nbsp; $(this).html((i, h) => h == 'This is some text! ⊕' ? 'This is some text! ×' : 'This is some text! ⊕');});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="changeArrow">This is some text! &oplus;</button>然而，由于您所做的只是更改图标，因此如果您使用 CSS 添加图标，这可能会变得更加简单。然后你可以在每次点击时简单地切换一个类：$("#changeArrow").click(function() {&nbsp; $(this).toggleClass('close');});#changeArrow:after {&nbsp; content: '⊕';&nbsp; margin: 0 -1px 0 4px;&nbsp;&nbsp;&nbsp; display: inline-block;}#changeArrow.close:after {&nbsp; content: '×';}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="changeArrow">This is some text!</button>

Answer 2

您应该在单击事件处理函数之外声明标志变量 ( textShowing )。此外，您可以使用this关键字来引用单击的元素：var textShowing = true;$("#changeArrow").click(function(){&nbsp; if (textShowing == true){&nbsp; &nbsp; $(this).html("This is some text! &otimes;");&nbsp; &nbsp; textShowing = false;&nbsp; } else {&nbsp; &nbsp; $(this).html("This is some text! &oplus;");&nbsp; &nbsp; textShowing = true;&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="changeArrow">This is some text! &oplus;</button>