Jquery меняют каждый первый .not ('class') - PullRequest
Новая
       19

Jquery меняют каждый первый .not ('class')

0 голосов
/ 19 мая 2018

Я пытаюсь сделать живой поиск с эффектом в Jquery, и мне не удается поймать первое слово в тексте.Я обертываю каждое слово в промежуток следующим образом: 

<span class="word word-this" id="word-#" aria-hidden="true">this</span>

И для сценария я пытаюсь добавить «прочитанный» класс к слову позади того, которое я ищу.Каждый раз, когда я перехожу к следующему слову "это", все слова "это" перед этим имеют класс "прочитанный".Вот так: 

var word = function(word) {
  $('span').each(function() {
    if ($(this).not('.readed') && $(this).hasClass('word-'+word)){
      // transformation
      $('.word-'+word).first().css('color', 'red').addClass('readed');
    }
  });
};

Проблема в том, что он улавливает первое вхождение слова, но не находит следующего, он остается на первом.Он не признает, что «прочитанный» класс был добавлен.Я не знаю, проблема ли это .first () или .not () или что-то еще.

1 Ответ

0 голосов
/ 19 мая 2018

Я нашел две ошибки.

  • $('.word-'+word).first() - это первый диапазон, в котором .word-<word>.
  • $(this).not('.readed') - это объект, поэтому он всегда верен как условиеоператора if.

Это рабочий код: 

var word = function(word) {
  $('span').not('.readed').each(function() {
    if ($(this).hasClass('word-'+word)) {
      // transformation
      $(this).css('color', 'red').addClass('readed');
      // interrupt the each loop
      return false;
    }
  });
};

Я нашел более простую реализацию. 

var word = function(word) {
  $('span.word-'+word).not('.readed').first().each(function() {
    $(this).css('color', 'red').addClass('readed');
  });
};
...