使用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

您应该在 click 事件处理函数之外声明标志变量 ( 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>