1

我的页面上有一些图像和一些跨度文本。每个图像都有他的文本，这些元素是用 javascript 动态添加的。

现在，我想在检测到图像上的鼠标悬停时显示正确的消息。

不容易解释，所以举个例子：

var len = article_affiliations.length;
for (var affiliation_id = 0; affiliation_id < len; affiliation_id++)
{
    $('#country_warning' + affiliation_id).mouseover(function () {
        document.getElementById('country_warning_message' + affiliation_id)
            .style.visibility = 'visible';
    }).mouseout(function () {
        document.getElementById('country_warning_message' + affiliation_id)
            .style.visibility = 'hidden';
    }); 
}

问题是，当调用 onmouseover 函数时，affiliation_id 将具有最大值，并且消息将显示在最后一张图片附近，而不是点击的附近。

非常感谢您的帮助。

4

3 回答 3

3

闭包应该可以解决问题：

for(var affiliation_id=0; affiliation_id<article_affiliations.length; affiliation_id++) {
    (function(i){
         $('#country_warning'+i).mouseover(function() {
              $('#country_warning_message'+i).css('visibility','visible');
         }).mouseout(function(){
              $('#country_warning_message'+i).css('visibility','hidden');
         });
    })(affiliation_id);
}
于 2012-07-19T15:02:36.270 回答
1

你需要将你的 for 循环绑定到一个闭包中才能工作。这样，所有的索引#country_warning_i都会受到影响。

$(function () {
    $.each(article_affiliations, function (i, v) {
        $('#country_warning' + i).mouseover(function (affiliation_id, affiliation_iddddd) {
            $('country_warning_message' + i).style.visibility = 'visible';
        }).mouseout(function (i, affiliation_iddddd) {
            $('country_warning_message' + i).style.visibility = 'hidden';
        });
    });
});

享受和好运！

于 2012-07-19T15:03:04.067 回答
0

您不应该使用只会遍历所有元素的循环来执行此操作。做这样的事情的最好方法是使用'event.target'（内置jQuery）和'this'对象。

而是将鼠标悬停事件处理程序附加到您的 . 最好的情况是您的标记看起来像这样：

<div class="item">
 <img src="someimage.jpg" />
 <span>some text</span>
</div>
<div class="item">
 <img src="someimage.jpg" />
 <span>some text</span>
</div>
<div class="item">
 <img src="someimage.jpg" />
 <span>some text</span>
</div>

这样你就可以使用类似于这个的脚本：

$('.item').on('mouseover', function() {
 $(this).find('span').show();
});

这将在您将鼠标悬停事件附加到的元素内搜索一个跨度（每个跨度）（对于这个前）。

另一种方法是像这样使用简单的 css：

span {
 visibility: hidden;
}
item:hover span {
 visibility: visible;
}

这是一个非常简单的解决方案，效果很好，但不幸的是 IE6 不支持将鼠标悬停在不同于 .

于 2012-07-19T15:08:24.173 回答