jquery Javascript事件交叉

odopli94  于 2022-12-18  发布在  jQuery
关注(0)|答案(2)|浏览(179)

由于某种原因,当你把鼠标移到任何一个菜单项上时,只有第二个菜单项的颜色发生了变化。代码如下。

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

f0brbegy1#

这会失败,因为i在内部函数中使用后会被更改。无论何时执行i++,它都会影响该作用域中对i的每个引用,包括扩展该作用域的函数
此处的解决方案是使用thisthis在事件处理程序中是对触发事件的事件的引用。

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

xzlaal3s2#

不需要对它们进行迭代,可以同时为多个ID项赋值,如果需要,甚至可以混合ID和类。
$(文档).ready(函数(){

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

相关问题