приоритизация функции jquery для переопределения другой

Используя jQuery, я пытаюсь запрограммировать 2 разных вида обратной связи в кнопках меню поиска. Проблема в том, что 2 требуют конфликтующего кода:

Во-первых, покажите, что красные кнопки «кликабельны», изменив их цвет на другой (синий), когда мышь входит в них, а затем изменив их обратно на исходный цвет (красный), когда мышь покидает их:

$('.buttons').mouseenter(function() {
    $(this).css("background-color", "blue");
});
$('.buttons').mouseleave(function() {
    $(this).css("background-color", "red");
});

Во-вторых, покажите, что определенная кнопка «нажата», изменив цвет кнопки на третий (желтый). Я хочу, чтобы кнопка оставалась желтой, пока не будет нажата новая/другая кнопка. Когда это произойдет, я хочу, чтобы только что нажатая кнопка стала желтой, а все остальные кнопки вернулись к исходному цвету (красному).

$(".buttons").click(function() {
$(".buttons").css("background-color", "red");
$(this).css("background-color", "yellow");
});

Все это прекрасно работает до тех пор, пока мышь не покинет нажатую кнопку, чтобы перейти к другой. Когда это происходит, mouseleave снова меняет желтую кнопку на красную.

Есть ли способ расставить приоритеты команд jQuery? Есть ли другая функция, которую я должен использовать вместо этого? Большое спасибо заранее!


click jquery mouseenter mouseleave
person katestrykermcm    schedule 21.05.2014    source источник
comment
Есть ли причина, по которой вы не можете сделать это с помощью CSS и просто добавить в событие click класс для изменения желтого цвета?   -  person Ballbin    schedule 21.05.2014

Ответы (3)


arrow_upward
1
arrow_downward

Вы должны использовать класс вместо функции .css(). Это намного проще. Используйте что-то вроде этого:

$('.buttons').hover(function(){
    $(this).toggleClass('hover');
}).on('click', function(){
    $('.buttons').removeClass('click').filter(this).addClass('click');
})

С этими css:

.buttons{
    background-color : red;
}

/*
Could also be .buttons:hover an then remove the JS
Much more efficient
*/
.buttons.hover{
    background-color : blue;
}

.buttons.click{
    background-color : yellow;
}

Скрипт: http://jsfiddle.net/Re9bj/12/

person Karl-André Gagnon    schedule 21.05.2014
comment
Спасибо за помощь! Недостатком этого является то, что нажатая кнопка остается желтой, даже когда нажимается новая кнопка. Я бы хотел, чтобы только самая последняя нажатая кнопка оставалась желтой. - person katestrykermcm; 21.05.2014

arrow_upward
1
arrow_downward

Я бы предложил использовать классы css для достижения этой цели.

Рабочий пример

CSS:

.buttons {
    background-color: red;
}
.buttons:hover {
    background-color: blue;
}
.clicked {
 background-color: yellow !important;
}

JavaScript:

var $buttons = $('.buttons')
$buttons.click(function () {
  $buttons.removeClass('clicked');
  $(this).addClass('clicked');
});

HTML:

<button class='buttons'>Button 1 </button>
<button class='buttons'>Button 2 </button>
<button class='buttons'>Button 3 </button>
<button class='buttons'>Button 4 </button>
person Jashwant    schedule 21.05.2014

arrow_upward
0
arrow_downward

дайте нажатой кнопке идентификатор, а затем проверьте этот идентификатор на mouseleave

вот jsfiddle

$('.buttons').mouseenter(function() {
    $(this).css("background-color", "blue");
});
$('.buttons').mouseleave(function() {
    if ($(this).attr("id") == "clicked" ) {
        $(this).css("background-color", "yellow");
    } else {
       $(this).css("background-color", "red"); 
    }
});

$(".buttons").click(function() {
    $(".buttons").css("background-color", "red");
    $(".buttons").attr("id","");
    $(this).css("background-color", "yellow");
    $(this).attr("id","clicked");
});
person Rudiger Kidd    schedule 21.05.2014
comment
Благодарю вас! Я рад узнать больше о возможностях jQuery. Тем не менее, я думаю, что собираюсь перейти на CSS, чтобы быть более эффективным, благодаря комментариям других. - person katestrykermcm; 21.05.2014
comment
@ user3064186 не беспокойтесь :) - person Rudiger Kidd; 21.05.2014