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"); }); } });是对触发事件的事件的引用。

{{1}}

Answer 2

没有必要对它们进行迭代，您可以同时分配多个ID项，甚至可以根据需要混合ID和类。

（文档）$。就绪（函数（）{

 $("#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");
 });
});

Javascript事件Crosswiring - 帮助！

2 个答案: