0

我在firefox、safari 和ie9 中使用jquery 编写了一些代码。但铬不喜欢它。chrome 控制台中没有明显的消息。我正在碰壁，希望有人能有所启发。脚本只是显示/隐藏一些工具提示。有任何想法吗？在这里摆弄，更改的代码仍然没有改变行为。

http://jsfiddle.net/qAfwJ/

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


});
4

4 回答 4

2

这里有几件事，你正在设置一个变量var toolTip = $(".info");

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

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

代替

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

你也可以考虑使用

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

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

于 2012-11-08T11:07:34.337 回答
1

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

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

基本上评估的是这个 -

$($(".contentBox"))

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

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

当您从字符串和变量构造选择器时，您应该以与此类似的方式执行此操作 -

var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);
于 2012-11-08T11:03:53.573 回答
1

我会从改变开始

        $(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 对象。

于 2012-11-08T11:04:05.953 回答
0

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

于 2012-11-08T11:06:37.830 回答