Событие при наведении, возвращающее несколько значений вместо тех, которые относятся к цели наведения

Question

Событие при наведении, возвращающее несколько значений вместо тех, которые относятся к цели наведения

0

У меня были проблемы, которые, как я чувствовал, были полезными и помогали мне, но у меня все еще есть проблема, поэтому, надеюсь, кто-то может помочь. Это часть словарной игры, которая показывает действительное слово на сетке в направлении стрелки, которую вы наводите. Могут быть одно слово (и, следовательно, стрелка в одном направлении) за ход или несколько стрелок в разных положениях (в этом моя проблема).

Проблема заключается в jquery.hover(), он печатает ожидаемый идентификатор и индекс, но печатает все различные состояния горизонта.

function placeIndicators(index) {
var board = readBoard(),
    id;

clearBoard(board);

if (suggestions.length > index) {
    var suggestion = suggestions[index];

    for (var i = 0; i < suggestion.positions.length; i++) {
        (function (suggestion, i) {

            // example contents of pos  {horiz: true, startPos: 5, word: 'blinky', score: 20}  
            var pos = suggestion.positions[i],
                rowOrCol = pos.rowOrCol,
                startPos = pos.start;

            var horiz = pos.horiz;

            if (pos.horiz) {
                id = '#s' + rowOrCol + '_' + startPos;
                $(id).addClass('arrow side-arrow');
            } else {
                id = '#s' + startPos + '_' + rowOrCol;
                $(id).addClass('arrow down-arrow');
            }
            $(id).attr('placeholder', '*');

            $('.arrow').hover(function () {
                console.log('id: ' + this.id + ' Index: ' + index + ' horiz: ' + horiz);
                showSuggestion(index, extractIndex(id, horiz));
            }, function () {
                console.log(index);
                clearBoard(board);
                placeIndicators(index);
            });
        })(suggestion, i);
    }
}

}

Я бы просто хотел, чтобы он печатал только детали, относящиеся к конкретной ячейке, на которой я нависаю, а не все содержимое массива. Работает нормально, если suggestion.positions.length == 1.

Пример вывода при наведении курсора на ячейку, когда suggestion.positions.length> 1:

id: s6_7 Индекс: 4 horiz: true
id: s6_7 Индекс: 4 horiz: false
id: s6_7 Индекс: 4 horiz: true

Большое спасибо.

da3m0n 23 янв. 2014, в 05:13

Источник

0

Я просто хотел бы отметить, что ваш console.log() работает.
Ohgodwhy 23 янв. 2014, в 03:49
0

@Ohgodwhy О, спасибо
da3m0n 23 янв. 2014, в 03:52

Теги:

javascript

jquery

closures

1 ответ

Ещё вопросы

Я просто хотел бы отметить, что ваш console.log() работает.

user1741851 · Accepted Answer · 2014-01-23T01-47-00.000Z

Без HTML я не смог отладить это в jsfiddle. Однако, поскольку вы являетесь связующим событием внутри цикла, возможно, что наведение события связано с.arrow несколько раз. Поэтому, когда вы наводите курсор на элемент, наведите триггеры, вызывающие эту ошибку.

Из-за свойства закрытия, horiz сохраняется в обработчике событий hover и печатает различные значения, основанные на состоянии горизонта, когда был прикреплен обработчик стрелок.

Возможным решением является перемещение $ ('. Стрелка'). Hover вне цикла. Но переменный горизонт не будет доступен. Для этого я могу предложить использовать другой атрибут для хранения горизонта в HTML

function placeIndicators(index) {
  var board = readBoard(),
    id;

  clearBoard(board);

  if (suggestions.length > index) {
  var suggestion = suggestions[index];

  for (var i = 0; i < suggestion.positions.length; i++) {
      (function (suggestion, i) {

        // example contents of pos  {horiz: true, startPos: 5, word: 'blinky', score: 20}  
        var pos = suggestion.positions[i],
            rowOrCol = pos.rowOrCol,
            startPos = pos.start;

        var horiz = pos.horiz;

        if (pos.horiz) {
            id = '#s' + rowOrCol + '_' + startPos;
            $(id).addClass('arrow side-arrow');
        } else {
            id = '#s' + startPos + '_' + rowOrCol;
            $(id).addClass('arrow down-arrow');
        }
        $(id).attr('placeholder', '*');
        $(id).attr('data-horiz', horiz);
    })(suggestion, i);
  }
  $('.arrow').hover(function () {
       var horiz = $(this).attr('data-horiz');
       console.log('id: ' + this.id + ' Index: ' + index + ' horiz: ' + horiz);
       showSuggestion(index, extractIndex(id, horiz));
    }, function () {
       console.log(index);
       clearBoard(board);
       placeIndicators(index);
  });
}

Работал ли код? Некоторые отзывы очень ценятся.
Только что был очень короткий тест, и это выглядит хорошо. Спасибо