Question

我有两个像这样的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！

Answer 1

将函数作为匿名函数传递给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(); 
  }); 
});

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

此fiddle演示了如何覆盖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);

Answer 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(); 
  }); 
});

Answer 3

这是因为您正在重新声明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/

隐藏/显示功能一次只能工作一个？ - Jquery

3 个答案: