1

我有两个这样的 jquery 函数：

$(document).ready(init); 
  function init() { 
  $(".alphaleft").hover(function (g) { 
  $(".boxy,.yee").show(); 
  }, 
  function (g) { 
  $(".boxy,.yee").hide(); 
  }); 
}

$(document).ready(init); 
  function init() { 
  $(".alpharight").hover(function (h) { 
  $(".tea,.coffee").show(); 
  }, 
  function (h) { 
  $(".tea,.coffee").hide(); 
  }); 
}

但一次只出现一个？就像如果我评论其中一个，另一个工作正常，反之亦然......不知道是什么原因造成的。有什么建议么？拉我的头发一个小时了:(

编辑： http: //jsfiddle.net/W3TTh这是我的 jfiddle！

4

3 回答 3

3

ready将函数作为匿名函数传递。

$(document).ready(function(){ 
   $(".alphaleft").hover(function (g) { 
    $(".boxy,.yee").show(); 
   }, 
   function (g) { 
    $(".boxy,.yee").hide(); 
   }); 
});

$(document).ready(function () { 
  $(".alpharight").hover(function (h) { 
    $(".tea,.coffee").show(); 
  }, 
  function (h) { 
    $(".tea,.coffee").hide(); 
  }); 
});

这可以防止由于函数名称相同而发生的冲突。由于您在闭包之外声明函数，因此由于两者之间的共享名称及其全局范围，第二个函数将覆盖第一个函数。

这个小提琴演示了如何init覆盖该方法。也可以通过重新排列代码来演示：

//Init function created  
function init() { 
  $(".alphaleft").hover(function (g) { 
  $(".boxy,.yee").show(); 
  }, 
  function (g) { 
  $(".boxy,.yee").hide(); 
  }); 
}

//Init function overridden
function init() { 
  $(".alpharight").hover(function (h) { 
  $(".tea,.coffee").show(); 
  }, 
  function (h) { 
  $(".tea,.coffee").hide(); 
  }); 
}

//Init function called 2x after being overridden
$(document).ready(init);
$(document).ready(init);
于 2013-04-23T09:33:08.847 回答
2

不需要两个ready函数。也不需要调用单独的init函数：

$(document).ready(function() { 
  $(".alphaleft").hover(function () { 
      $(".boxy,.yee").show(); 
  }, function () { 
      $(".boxy,.yee").hide(); 
  }); 

  $(".alpharight").hover(function () { 
      $(".tea,.coffee").show(); 
  }, function ) { 
      $(".tea,.coffee").hide(); 
  }); 
});
于 2013-04-23T09:35:22.773 回答
0

这是因为您正在重新声明该init功能。只需将它包装在一个这样的函数中：

$(document).ready(init); 
function init() { 
    $(".alphaleft").hover(function (g) { 
        $(".boxy,.yee").show(); 
    }, 
    function (g) { 
        $(".boxy,.yee").hide(); 
    }); 
    $(".alpharight").hover(function (h) { 
        $(".tea,.coffee").show(); 
    }, 
    function (h) { 
        $(".tea,.coffee").hide(); 
    });    
}

这是一个工作示例：http: //jsfiddle.net/DrYZV/

于 2013-04-23T09:45:58.413 回答