Элемент с наведением, затем нажмите, удаляет эффект наведения, и нажмите снова, снова добавляет наведение - PullRequest
Новая
       46

Элемент с наведением, затем нажмите, удаляет эффект наведения, и нажмите снова, снова добавляет наведение

2 голосов
/ 26 октября 2011

Я пытаюсь создать поле головоломки слова поиска с JQuery. В основном это таблица с алфавитом в каждой ячейке, и пользователь должен найти и отметить слова в сетке, щелкнув ячейки таблицы. Поэтому я пытаюсь объединить клики и события наведения следующим образом:

Все ячейки должны иметь эффект выделения при наведении курсора мыши, кроме случаев, когда она уже нажата. Если щелкнуть по нему, он должен просто поменять на другой цвет, чтобы отметить активный выбор, чтобы эффект наведения был удален. При повторном нажатии на выбранную ячейку она должна вернуться в исходное состояние с добавленным эффектом выделения при наведении курсора. Дальнейшие щелчки просто повторят вышеупомянутый переключатель.

Как это возможно? Я пробовал следующее с опцией unbind (), bind (), но это не сработало. Спасибо, Аттила 

$("#puzzleTable td").each(function(){
$(this).hover(
   function(){
       $(this).css("background-color", "#FF6633");
   },
   function() {
       $(this).css("background-color", "#99CC00");
   }).toggle(
       function(){
       $(this).unbind('mouseenter mouseleave'),
       $(this).css("background-color", "#006699")
       },
       function(){      
       $(this).css("background-color", "#99CC00"),              
       $(this).bind('mouseenter mouseleave')
       }
   );
});

Ответы [ 2 ]

3 голосов
/ 26 октября 2011

Я бы сделал все это, связав два события: щелчок и наведение.У каждого из них была бы своя собственная логика, и они работали бы независимо друг от друга.Кроме того, поскольку все, что вы хотите сделать, - это вносить косметические изменения, вы можете сделать это, добавляя / удаляя CSS-классы, а не обновляя CSS напрямую (т. Е. С помощью встроенных стилей).

Вот скрипка: http://jsfiddle.net/VCf3E/

Функция выборки (классы и цвета не взяты из кода примера): 

$('table td')
    .hover(
   function(){
       $(this).addClass('hover');
   },
   function() {
       $(this).removeClass('hover');
   })
    .click(
    function() {
       $(this).toggleClass('active');
});
0 голосов
/ 26 октября 2011

В вашем коде не указывается обработчик событий при повторном связывании событий mouseenter и mouseleave.Тем не менее, если вы используете классы CSS для применения своих стилей, вам вообще не придется отвязывать и перепривязывать события мыши.Просто определите ваши правила состояния "нажал", чтобы они переопределяли правила состояния "зависания".Это довольно просто, особенно если вам не нужна поддержка IE6 (решение IE6 также включено ниже):

Стили CSS: 

td {
    background-color: #99CC00;
}

td:hover {
    background-color: #FF6633;
}

td.clicked, td.clicked:hover {
    background-color: #006699;
}

Javascript: 

$("#puzzleTable td").click(function () { $(this).toggleClass('clicked'); });

Если вам требуется поддержка IE6, он становится немного сложнее (поскольку IE6 поддерживает :hover только для элементов привязки):

CSS: 

td {
    background-color: #99CC00;
}

td.hover {
    background-color: #FF6633;
}

td.clicked {
    background-color: #006699;
}

Javascript: 

var cells = $('#puzzleTable td');
cells.bind('mouseenter mouseleave', function() { $(this).toggleClass('hover'); });
cells.click(function() { $(this).toggleClass('clicked'); });
...