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

суть проста. Есть заголовок, в нем текст. При нажатии текст должен меняться. Разумеется нужно было какое-то условие проверки, решил проверять символы, потрогал 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");
      } 
});
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
В чём ошибка исходного кода:
Во всех заголовках присутствует в конце зачем-то единица.
И поэтому при очередном клике, раньше других срабатывает одно и то же условие,
где ищется '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;
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
Не надо никакого indexOf:

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);
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы