2

我有以下代码：

        $('.popUp').mouseover(function() {
            var divName = $(this).data("id");
            $('#' + divName).fadeIn();
        });

        $('.popUp').mouseout(function() {
            var className = $(this).data("id");
            $('#' + divName).fadeOut();
        });

它应该在一些悬停的文本附近显示一个弹出窗口。要显示的文本存储在页面其他位置的隐藏 DIV 中。我通过 SPAN 标记中的 data-id="divname" 传递了 DIV 的名称。问题是，无论我做什么，jQuery 都不会对文本做出反应。不是鼠标悬停，悬停，甚至点击。没有什么。我通过在其中放置一个 alert() 来测试它只是为了看看是否会做出反应，但它从来没有。

以下是其中一个 SPAN 的示例：

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or 
<span class="popUp" data-id="s2"><u>associated</u></span>

我究竟做错了什么？:)

谢谢！

4

4 回答 4

3

您尚未发布 div 的标记，但假设与此类似：

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or 
<span class="popUp" data-id="s2"><u>associated</u></span>

<div id="s1">The s1 div</div>
<div id="s2">The s2 div</div>

变量名称从更改className为divName它工作正常。

DEMO - 默认，在变量名修复后

如对原始代码的评论中所述，确保您的脚本在文档就绪块内运行，并确保任何 jQuery 引用都存在且有效。

此外，如果您发现在链接之间快速鼠标悬停时动画行为不规律，您可以更新类似以下的代码：

$('.popUp').mouseover(function() {
    var divName = $(this).data("id");
    $('#' + divName).stop(true, true).fadeIn();
});

$('.popUp').mouseout(function() {
    var divName = $(this).data("id");
    $('#' + divName).hide();
});​

演示stop()- 使用和的替代代码hide()

我添加/更改的唯一一件事（您可能根本不需要）是stop(true, true)停止以前的动画，如果您将鼠标悬停在链接上来回相当快。

此外，fadeOut() hide()由于在链接之间快速鼠标悬停时可能与动画发生冲突，而不是可能会更好。

这些只是建议，可能并不直接适用于您的场景。

于 2012-10-10T21:09:30.213 回答
1

我创建了一个jsfiddle。它工作正常。

修改后的代码：

JS：

$(document).ready(function(){
    $('.popUp').mouseover(function() {
                var divName = $(this).data("id");
                $('#' + divName).fadeIn();
            });

    $('.popUp').mouseout(function() {
            var divName = $(this).data("id");
            $('#' + divName).fadeOut();
        });

​});

HTML：

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or <span class="popUp" data-id="s2"><u>associated</u></span> <div id=s2 style='display:none'> text text text text text text text text text </div> <div id=s1 style='display:none'> text text text text text text text text text </div>​</p>

于 2012-10-10T21:06:25.923 回答
1

如果没有更多细节，这很难调试。

 $(document).on("mouseover", ".popup", function() {
    var id = $(this).data('id');
    $(id).fadeIn();
 }).on('mouseout', '.popup', function() {
    var id = $(this).data('id');
    $(id).fadeOut();   
 });

​</p>

我也试过这个

$(".popup").mouseover(function() {
var id = $(this).data('id');
    $(id).fadeIn();
 }).mouseout(function(){
var id = $(this).data('id');
    $(id).fadeOut();
 })

它有效。问题可能是因为 .popup 在 dom 就绪时不存在（也许它是从 AJAX 请求加载的？）。除非我们看到完整的代码，否则我们无法确定。带有 $(document).on() 的代码应该在 99% 的时间内都可以正常工作（从无中生有的统计数据）

这是一个jsFiddle：

http://jsfiddle.net/6Pp9w/

于 2012-10-10T21:13:12.487 回答
0

在您的代码中：

$('.popUp').mouseover(function() {
   var divName = $(this).data("id");
    $('#' + divName).fadeIn();
});
$('.popUp').mouseout(function() {
    var className = $(this).data("id");
    $('#' + divName).fadeOut();
});

对于 mouseout 事件，您使用 define className但您使用divName。将 divName更改为className。

于 2012-10-10T21:12:35.753 回答