Question

我在firefox，safari和ie9中编写了一些jquery的代码。但铬不喜欢它。 Chrome控制台中没有明显的消息。我正在撞墙，希望有人可以发光。脚本只显示/隐藏一些工具提示。有任何想法吗？在这里摆弄，改变代码仍然没有改变行为。

$(document).ready(function(){
    //custom toolTip Written by CASherwood but not working in ie9/chrome
        var ShowId;
        var id;
        var contentholder = $(".contentBox");
        var toolTip = $(".info");
        var idHashString = '#info';
        var idString = 'id';

            function showToolTip(name, id){
                  id = name + id;
                  $(id).fadeIn(1000);
            }

            function hideToolTip(name, id){
                  id = name + id;
                  $(id).fadeOut(1000);
            }

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });


});

Answer 1

这里有一些事情，您正在设置变量var toolTip = $(".info");

然后使用这个相同的变量为它添加一个函数。你在这里做的事实上是

$($(".info")).mouseover(

而不是

var toolTip = $(".info");
toolTip.mouseover(

您也可以考虑使用

jquery.hover(handlerIn(eventObject) , handlerOut(eventObject)  );

http://api.jquery.com/hover/

Answer 2

好的，我注意到的一件事是你使用jQuery选择器将一些元素包装两次。

var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
  ...
});

基本上评估的是这个 -

$($(".contentBox"))

这看起来不太好，我不太确定它是否会按预期工作。即使这样，跨浏览器兼容性的问题也可能发挥作用，我相信这正是您所经历的。如果您已经捕获了元素并且不仅仅将选择器存储为字符串，那么就不需要使用$语法再次包装该元素。

var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
  ...
});

当你从字符串和变量构造选择器时，你应该以类似的方式这样做 -

var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);

Answer 3

我首先要改变

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

到

        toolTip.mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        contentholder.mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

因为你的toolTip和contentholder变量已经是jquery对象了。

Answer 4

我不确定并且没有测试过，但如果您尝试在showToolTip()之前或之后移动这两个函数（hideToolTip()和$(function(){});）会怎样？可能会被视为某种内部函数而不是全局函数，这可能是一件事。

jQuery在Firefox，Safari中运行，但在Chrome中运行

4 个答案: