Question

我的网站包含从网格到列表的切换jQuery功能。在另一个外部.js文件中有以下函数

$(function (){
$('.image a img').hover(
function () {
     $(this).stop().fadeTo('slow', 0.7);
     },
function(){
    $(this).stop().fadeTo('slow', 1);
}
);
});

这是第一次工作。如果我从“网格”切换到“列表”或反之，则它不再起作用。

在谷歌开发者工具中，内联样式在切换后消失。是否有任何简单的解决方案来“重新加载”上述功能？

Answer 1

问题是你没有重置队列。所以，如果你快速鼠标悬停/鼠标。它什么都不会显示。试试这个：

$('body').on("mouseenter", ".image a img", function () {
     $(this).stop(true, false).fadeTo('slow', 0.7);
   })
.on("mouseleave", ".image a img", function(){
    $(this).stop(true, false).fadeTo('slow', 1);
});

哪个会重置队列，但不会跳到最后。此外，您可以使用LIVE元素使事件在所有更改的项目上保持活动状态。这是自1.8以来的新jQuery中的问题

Answer 2

我会尝试这样的事情“

$( '.image a img' ).on({
     mouseenter: function() {

        $( this ).stop().fadeTo('slow', 0.7);

      },
      mouseleave: function() {

        $( this ).stop().fadeTo('slow', 1);

     }
   });

Answer 3

为了确保我必须看到更多代码，但原因可能是引用的函数将.hover事件绑定到绑定时刻中与查询$('.image a img')匹配的所有元素（打开时）文档就绪事件），所以如果你以后添加新元素（编辑：我猜，你的切换函数呢？），即使匹配查询$('.image a img') .hover也不会为它们定义。切换到$(.image container').on("mouseenter mouseleave",'.image a img', handlerInOut)，其中.image container是.image a img所属的元素，并查看它是否有帮助。

从网格切换到列表后，jquery功能无法正常工作

3 个答案: