Question

我今天早些时候发布了关于切换DIV可见性的this question，并收到了正确的答案，正如您在此Fiddle中看到的那样。

我基本上是尝试使用jQuery悬停来切换重复类的div可见性。

问题是，我无法在Wordpress网站上运行它。

即使所有的div和CSS都存在且正确，jQuery根本就不会触发。根本没有在控制台中报告错误。它只是没有加载这个功能。

我一定是打错了！

仅供参考 - WP网站正在加载jQuery 1.11.0和jQuery.migrate 1.2.1。

jQuery究竟如何位于站点的页脚中（由于兼容模式而被包装）：

 <script type="text/javascript">

 (function($) {
   $(".showlist-wrap").hover(function() {
   $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
 });
 })( jQuery );

 </script>

CSS看起来像这样：

 .showlist-wrap {
   position:relative;
   width:293px;
   height:195px;
   background:black;
   margin-right:13px;
   margin-bottom:13px;
   float:left;
   border-radius:10px;
   overflow:hidden;
 }

 .showlist-artwork {
   position:absolute;
   top:0;
   width:293px;
   height:195px;
   display:block;
 }

 .showlist-info {
   position:absolute;
   top:0;
   width:293px;
   height:195px;
   display:none;
 }

HTML就是这样：

 <div class="showlist-wrap">
 <div class="showlist-artwork"><img src="/image.jpg" /></div>
 <div class="showlist-info">Some Text Goes Here</div>
 </div>

就像我上面提到的那样，实际的CSS在页面上完美地显示，并且HTML明智的地方应该是它应该存在的地方。这只是jQuery无法正常运行所以代码必须是错误的。

有人能告诉我哪里出错吗？

Answer 1

wordpress自动加载jquery，因此如果你在主题中手动包含jquery，jquery会被加载两次，这可能会产生冲突。

请阅读this关于正确包含js和css的文章

Answer 2

可能是因为您在绑定事件之前没有等待DOM ready，如果您没有使用.off()绑定事件，则无法使用.on()：< / p>

$(function(jQuery) {
    (function($) {
        $(".showlist-wrap").on('hover', function() {
            $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
        });
    })( jQuery );
});

或者您要绑定此事件处理程序的内容可能无法在DOM ready上使用：

(function($) {
    $(document).on('hover', ".showlist-wrap", function() {
        $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
    });
})( jQuery );

jQuery Hover没有在Wordpress网站上工作

2 个答案: