Создание на основе предыдущего вопроса, который у меня был ...

Я кодирую инструмент поиска на странице, который работает аналогично функции поиска в браузере. Когда пользователь начинает вводить текст в поле поиска, совпадающие буквы окружаются полосой с class="highlight", имеющей зеленый фон. Это прекрасно работает.

Я также хочу иметь возможность перебирать совпадения. При нажатии кнопки «Далее» или «Назад» к классу диапазона добавляется «текущий» класс - class="highlight current", имеющий желтый фон. При каждом нажатии кнопки «Далее» следующее совпадение выделяется желтым цветом. Кнопка «Предыдущий» выделяет предыдущее совпадение.

Код:

$('.search-btn').click(function (e) {
    e.preventDefault();
    var total_matches = $('.highlight').length;

    var current_selected = $('.highlight').index('.current');
    //index of term currently highlighted in yellow, -1 if nothing is highlighted.

    if( $(this).hasClass( 'search-next') ) {//Next button has been clicked
        var select_me_next = (current_selected+1) % total_matches;
        $('.highlight').eq(select_me_next).addClass('current');
        $('.highlight').eq(current_selected).removeClass('current');
    }
    if( $(this).hasClass( 'search-prev') ) {
    //something similar for the search-prev button....
    }
});

При первом нажатии current_selected = -1, что правильно
При втором нажатии current_selected = 0, что правильно
При третьем щелчке снова current_selected = -1, должно быть 1. Почему ??

0
studio305 24 Дек 2015 в 05:50

2 ответа

Лучший ответ

Вы неправильно используете .index. Когда аргумент является селектором, он указывает коллекцию для поиска объекта, к которому вы его применили, поэтому $('.highlight').index('.current') означает поиск позиции .highlight в коллекции .current. Это противоположно тому, что вы хотите.

Вы должны использовать $('.current').index('.highlight') или $('.highlight').index($('.current')) (когда аргумент является объектом, а не селектором, это элемент, положение которого нужно найти).

А чтобы удалить старый выбранный элемент, используйте $('.highlight.current') вместо .eq(current_selected). Причина этого в том, что когда current_selected отрицательно, .eq() отсчитывается с конца, что удаляет класс из неправильного элемента.

$('.search-btn').click(function(e) {
  e.preventDefault();
  var total_matches = $('.highlight').length;

  var current_selected = $('.current').index('.highlight');
  //index of term currently highlighted in yellow, -1 if nothing is highlighted.

  if ($(this).hasClass('search-next')) { //Next button has been clicked
    var select_me_next = (current_selected + 1) % total_matches;
  } else if ($(this).hasClass('search-prev')) {
    select_me_next = current_selected - 1;
    if (select_me_next < 0) {
      select_me_next = total_matches - 1;
    }
  }

  $('.highlight.current').removeClass('current');
  $('.highlight').eq(select_me_next).addClass('current');
});
.highlight {
  background-color: green;
}
.highlight.current {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="highlight">Item 1</li>
  <li class="highlight">Item 2</li>
  <li class="highlight">Item 3</li>
</ul>

<button class="search-btn search-next">
  Next
</button>
<button class="search-btn search-prev">
  Prev
</button>
<div id="which"></div>
1
Barmar 24 Дек 2015 в 03:47

Я никогда не использовал .index() с селектором, переданным в методе. Вместо этого я сделал что-то вроде этого.

var index = -1;
$('.highlight').each(function(i){
   if($(this).hasClass('current')){
      index = i;
   };
});

Вернет ли это правильный результат?

0
Donnie D'Amato 24 Дек 2015 в 03:10