Question

以下代码适用于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>

Jquery：

function f1(id)
{   

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

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

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

谢谢

Answer 1

你在这里混合你的习语。它应该仍然可以工作，但你可能会通过“jQuery方式”来做更好的结果（而且肯定更整洁的代码），这涉及将代码与HTML分离。

所以，首先是HTML：

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

与没有onMouseOver和onMouseOut属性的内容相同。

现在，jQuery，最好是在您使用<script src="url.js" type="text/javascript"></script>加载的单独文件中。

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

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

对于要传递给函数的id，这有点棘手。这个号码来自哪里，它意味着什么？这将影响如何处理。

如果没有别的，您可以使用HTML5 data-属性将其包含在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的{{1}}可能是有意义的。但是，您不应该使用纯数字img。因此，无论您使用什么从数据库中提取ID，都应该预先添加一些内容，可能只是id或i。

然后你的HTML看起来像

img

您的jQuery可以使用<img id="i1" title="" src="images/image1.jpg">代替$(this).attr('id')来访问它。

jquery onmouseover和onmouseout没有使用IE浏览器

1 个答案: