Как правильно построить условия на проверку IndexOf?

Question

[Игорь Ламп]

суть проста. Есть заголовок, в нем текст. При нажатии текст должен меняться. Разумеется нужно было какое-то условие проверки, решил проверять символы, потрогал indexOf, до Двойки условия выполнил, все ок, текст изменялся. А как потребовалось дальше работать - ничего не изменяет. С чем связано? подскажите пожалуйста
----------- https://jsfiddle.net/L9y62vb3/3/ ---------------

<h1 id="header">Hello! Play with me!</h1>

$("#header").click(function() {
    if ($(this).text().indexOf('Hello') != -1) {
        $("#header").html("0 - click again!1");
      }else if($(this).text().indexOf('0') != -1) {
        $("#header").html("1 - click again!1");
      }else if($(this).text().indexOf('1') != -1) {
        $("#header").html("2 - click again!1");
      }else if($(this).text().indexOf("2") != -1)  {
        $("#header").html("3 - click again!1");
      } 
});

Answer 1

[0xD34F]

Не надо никакого indexOf:

<h1 class="header">click me</h1>
<h1 class="header">click me</h1>
<h1 class="header">click me</h1>

const text = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];

$('.header').click(function() {
  const index = $(this).data('index') || 0;
  $(this).text(text[index]).data('index', (index + 1) % text.length);
});

Comments

[Игорь Ламп]

Это конечно круто :D
Но я только учусь, можно какой-нибудь более топорный и простой вариант? или же этот объяснить пожалуйста, если не трудно

Answer 2

[Сергей Соколов]

В чём ошибка исходного кода:
Во всех заголовках присутствует в конце зачем-то единица.
И поэтому при очередном клике, раньше других срабатывает одно и то же условие,
где ищется '1' и заголовок становится 2 - click again!1

Как лучше
Где-то сохранять, какой из заголовков виден сейчас.
Не текст заголовка — тексты могут частично совпадать и indexOf() начнёт ошибаться — а номер заголовка.

0xD34F подсказал как всегда красивый, правильный и лаконичный вариант.

Ещё можно держать переменную, указывающую на очередной заголовок:

const headers = ['Мойте руки', 'Сидите дома', 'Помогайте соседям', ];
let currentHeader = 0;
$('#header').on('click', function() {
  $(this).text(headers[currentHeader]);
  currentHeader += 1;
  currentHeader %= headers.length;
});

Comments

[Игорь Ламп]

Подскажи пожалуйста подробнее, как подкорректировать в подобном виде, чтоб это верно заработало?

[Сергей Соколов]

В исходном варианте пришлось бы очень некрасиво повторять текст каждого заголовка целиком, дважды:

оч. плохой вариант

$("#header").click(function() {
  const currentText = $(this).text(); // один раз, и в константу
  let html;

  if (currentText === "Hello! Play with me!")) {
    html = "0 - click again!1";
  } else if (currentText === "0 - click again!1")) {
    html = "1 - click again!1";
  } else if (currentText === "1 - click again!1")) {
    html = "2 - click again!1";
  } else if (currentText === "2 - click again!1")) {
    html = "3 - click again!1";
  }

  $("#header").html(html);
});