Javascript Event Crosswiring - Помогите!

Question

По какой-то причине, когда вы наводите курсор мыши на любой из пунктов меню, только второй получает изменение цвета.Код ниже.

Заранее спасибо,

Гвидо

  $(document).ready
   (
   function(){   
    var menuItems = [$("#calendar_menu_item"), $("#patient_menu_item")];

    for (i = 0; i < menuItems.length; i++) {
     var menuItem = menuItems[i];     

     menuItem.bind('mouseover', function(){
      menuItem = menuItems[i]; 
      menuItem.css("background-color", "#749ccf");
     });

     menuItem.bind('mouseout', function(){
      menuItem = menuItems[i]; 
      menuItem.css("background-color", "#506077");
     });
    }
   }
   ); 

Answer 1

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

Решение здесь заключается в использовании this вместо этого.this в обработчике события является ссылкой на событие, для которого было инициировано событие.

$(document).ready(function () {
    var menuItems = [$("#calendar_menu_item"), $("#patient_menu_item")];

    for (i = 0; i < menuItems.length; i++) {
        var menuItem = menuItems[i];

        menuItem.bind('mouseover', function () {
            $(this).css("background-color", "#749ccf");
        });

        menuItem.bind('mouseout', function () {
            $(this).css("background-color", "#506077");
        });
    }
});

Answer 2

Нет необходимости перебирать их, вы можете назначать несколько идентификаторов одновременно, даже если хотите ID и класс.

$ (document) .ready (function (){

 $("#calendar_menu_item,#patient_menu_item").bind('mouseover', function(){
  $(this).css("background-color", "#749ccf");
 });

 $("#calendar_menu_item,#patient_menu_item").bind('mouseout', function(){
  $(this).css("background-color", "#506077");
 });
});