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

Question

我想创建一个按钮，在单击时更改其内容，但当我再次单击时，内容必须返回到其初始外观。我已经成功创建了一个 jQuery 代码，它更改了内容，但需要第二次单击部分的帮助。我的目标是这个按钮有两个条件，并根据单击时的活动条件切换到第二个条件。$("#changeArrow").click(function(){  var textShowing = true;  if (textShowing == true){    $("#changeArrow").html(function(){      return "This is some text! &otimes;";      textShowing = false;    });  }  else {    $("#changeArrow").html(function(){      return "This is some text! &oplus;";      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() {

  $(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() {

  $(this).toggleClass('close');

});

#changeArrow:after {

  content: '⊕';

  margin: 0 -1px 0 4px;  

  display: inline-block;

}

#changeArrow.close:after {

  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(){

  if (textShowing == true){

    $(this).html("This is some text! &otimes;");

    textShowing = false;

  } else {

    $(this).html("This is some text! &oplus;");

    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>