Измените содержимое кнопки, когда она нажата в бесконечном l oop, используя 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() {
  $(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 ) вне функции обработчика события click. Также вы можете использовать ключевое слово this для ссылки на элемент, по которому щелкнули:

var textShowing = true;
$("#changeArrow").click(function(){
  if (textShowing == true){
    $(this).html("This is some text! ⊗");
    textShowing = false;

  } else {
    $(this).html("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>