0

以下代码适用于 Opera 但不适用于 IE 8

我在页面上有 dtest2 div 元素，出于测试目的，我试图在图像的 mouseover 和 mouseout 事件上更改 div 元素的内容。

html:

  <a ><img  title='' class='imgclass' src='images/image1.jpg'  onmouseover="f1('1')"  onmouseout="f2('1');"    ></a>

查询：

function f1(id)
{   

 $('#dtest2').html("Test "+id);
}
    function f2(id)
{   
        $('#dtest2').html("Test 2 "+id);
}

使用 Opera 它可以正常工作。使用 IE 它可以工作 1 次或几次，然后停止工作。IE的任何特定命令？

这些图像来自数据库，id 是数据库中的唯一编号。

谢谢

4

1 回答 1

1

你在这里混合了你的习语。它应该仍然可以工作，但您可能会通过“jQuery 方式”处理事情获得更好的结果（并且绝对是更整洁的代码），这涉及将代码与 HTML 分离。

所以，首先是 HTML：

<a>
    <img title='' class='imgclass' src='images/image1.jpg'>
</a>

它与您拥有的相同，没有onMouseOverandonMouseOut属性。

现在，jQuery，最好放在一个单独的文件中，您可以使用它<script src="url.js" type="text/javascript"></script>来加载。

$('img.imgclass').hover(function() {
    $('#dtest2').html('Test');
}, function() {
    $('#dtest2').html('Test2');
});

jQuery 的主要优点之一是它旨在平滑所有浏览器的不兼容性，因此您只需要为所有浏览器编写一个代码。

至于id你想要传递给你的函数的，这有点棘手。这个数字是从哪里来的，它是什么意思？这将影响如何处理。

如果不出意外，您可以使用 HTML5data-属性将其包含在 HTML 中，如下所示：

<a>
    <img title='' class='imgclass' src='images/image1.jpg' data-hover-id="1">
</a>

然后，您可以通过对 jQuery 进行以下更改来检索它：

$('img.imgclass').hover(function() {
    var id = $(this).data('hover-id');
    $('#dtest2').html('Test ' + id);
}, function() {
    var id = $(this).data('hover-id');
    $('#dtest2').html('Test2 ' + id);
});

编辑已编辑的问题：由于它们是来自数据库的唯一 ID，因此将它们用作id. img但是，您不应该使用纯数字ids。因此，无论您使用什么从数据库中提取 ID，都应该在前面加上一些东西，也许只是i或img.

然后你的 HTML 看起来像

<img id="i1" title="" src="images/image1.jpg">

并且您的 jQuery 可以使用$(this).attr('id')而不是$(this).data('hover-id').

于 2012-08-02T23:09:29.703 回答