Question

我正在处理jquery <li>悬停效果，它正在使用jsfiddle而不是在测试网站上，即“隐藏”div不会在悬停时显示。

两者都有相同的资源，html和css，唯一的区别是我在测试站点的头部区域的js周围添加了开始和结束<script>标签。

萤火虫没有错误。

是否可以使用jsfiddle中的所有js代码并在其周围包装<script>标记，或者这是否会导致一些语法错误，这些错误可能会阻止悬停效果起作用？

这是我在测试网站上使用的代码（没有可用的链接）。

<script>
// begin hover functionality
$(".magic li").each(function() {

var hiddenDiv = $(this).find(".card"),
parentElement = $(this),
api = {};

api.isOpen = false;

api.timeout = null;

api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
"left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94 
});
}

api.resetTimeout = function(){

clearTimeout( api.timeout );
}

api.startShowing = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.show();        
},200);
}

api.startHiding = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.hide();        
},150);
}
api.show= function(){

if(!api.isOpen){

api.position();

hiddenDiv .fadeIn(300);

api.isOpen = true;

// $("#isotope_container").bind("scroll.hiddendiv",api.position);

}
}

api.hide = function(){

if( api.isOpen ) {
api.isOpen = false;
// $("#isotope_container").unbind("scroll.hiddendiv");     
hiddenDiv.fadeOut(100);
}

}

hiddenDiv.bind("mouseenter", function() {

api.resetTimeout();

}).bind("mouseleave", function() {

api.startHiding();

}).css("z-index", 100).appendTo("#non_scrollable_area"); 

$(this).data("hiddenApi",api );

}).bind("mouseenter", function() {

var api = $(this).data("hiddenApi");

api.startShowing();

}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element

var api = $(this).data("hiddenApi");

api.startHiding();

});

// begin custom scrollbar
(function($){
$(document).ready(function(){
$(".holder_a, .holder_b, .holder_c, .holder_d").mCustomScrollbar({
set_width:false, 
set_height:false, 
horizontalScroll:true, 
scrollInertia:550, 
scrollEasing:"easeOutCirc", 
mouseWheel:"auto", 
autoDraggerLength:true, 
scrollButtons:{ 
enable:false, 
scrollType:"continuous", 
scrollSpeed:20, 
scrollAmount:40 
},
advanced:{
updateOnBrowserResize:true, 
updateOnContentResize:false, 
autoExpandHorizontalScroll:false, 
autoScrollOnFocus:true 
},
callbacks:{
onScrollStart:function(){}, 
onScroll:function(){}, 
onTotalScroll:function(){}, 
onTotalScrollBack:function(){}, 
onTotalScrollOffset:0, 
whileScrolling:false, 
whileScrollingInterval:30 
}
});
});
})(jQuery);
</script>

Answer 1

根据“框架”下左侧的下拉列表，代码已包含在onload处理程序中。在您的测试站点中没有onload处理程序。这就是他们表现不同的原因。

您需要在文档的 end 中包含脚本（在结束</body>标记之前）或将其包装在$(document).ready()处理程序中。

如果您将脚本放在<head>而不使用文档就绪（或onload用于oldschool非jQuery代码），那么它无法访问任何元素，因为它们尚未被解析和添加到了DOM。

Answer 2

$( function() {

// All Your JS Code here

});

在JS Fiddle他们已经$(window).load( function() { });，但你没有$(document).ready( function() { });或$( function() { });这是添加$(document).ready( function() { });事件处理程序的另一种方法！

我为什么要使用它？

Ans：文档完全加载后，它会将所有事件处理程序绑定到关联的元素。其他事件也用于此目的。

Answer 3

我已经实现了@jai的第一条评论建议，它似乎有效：

put everything in $(document).ready(function(){--here--});

非常感谢，在得到几个答案之前，这个问题肯定已经持续了不到三十秒，谢谢！

Answer 4

尝试使用：

<script type='text/javascript'>
  $(document).ready(function(){
    $(".magic li").each(function () {

    var hiddenDiv = $(this).find(".card"),
    parentElement = $(this),
    api = {};

    api.isOpen = false;

    api.timeout = null;

    api.position = function () {
        hiddenDiv.css({
            "top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
            "left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94
        });
    }

    api.resetTimeout = function () {

        clearTimeout(api.timeout);
    }

    api.startShowing = function () {

        api.resetTimeout();

        api.timeout = setTimeout(function () {
            api.show();
        }, 200);
    }

    api.startHiding = function () {

        api.resetTimeout();

        api.timeout = setTimeout(function () {
            api.hide();
        }, 150);
    }
    api.show = function () {

        if (!api.isOpen) {

            api.position();

            hiddenDiv.fadeIn(300);

            api.isOpen = true;

        // $("#isotope_container").bind("scroll.hiddendiv",api.position);

        }
    }

    api.hide = function () {

        if (api.isOpen) {
            api.isOpen = false;
            // $("#isotope_container").unbind("scroll.hiddendiv");     
            hiddenDiv.fadeOut(100);
        }

    }

    hiddenDiv.bind("mouseenter", function () {

        api.resetTimeout();

    }).bind("mouseleave", function () {

        api.startHiding();

    }).css("z-index", 100).appendTo("#non_scrollable_area");

    $(this).data("hiddenApi", api);

}).bind("mouseenter", function () {

    var api = $(this).data("hiddenApi");

    api.startShowing();

}).bind("mouseleave", function () { // start closing timeout once mouse leaves isotope element

    var api = $(this).data("hiddenApi");

    api.startHiding();

   });
});
</script>

jquery <li>悬停效果在jsfiddle上运行而不是在测试站点</li>

4 个答案: