在IE中有没有jQuery attr()的替代方法?

8

好的,如果我说错了请纠正,我理解jQuery的attr()在IE中无法使用。(被标记为wontfix)既然如此,最好的替代方案是什么?例如,这样在除了IE以外的所有地方都可以使用:

jQuery(document).ready(function($) {
    $('.airsrc').each(function() {
        var $this = $(this);
        var src = $this.attr('data-websrc');
        $this.attr('src', src);
    });
});

更新:糟糕...我意识到问题所在了。实际上,我将它放在了基于CSS3媒体查询的if语句中。IE8或更低版本不支持原生媒体查询。但是attr()确实可行!


1
我认为attr('src')是有效的...但使用自己的属性则不行。 - Jose Adrian
3
那个错误报告具体指的是事件属性,比如 'onchange'。据我所知,在IE中使用attr('xx')应该能正常工作。 - Dexter
你说得对。我的意思是针对自定义数据属性。 - ryanve
1
@ryanve:自定义数据属性完全正常。 - T.J. Crowder
5个回答

8

我经常在IE中使用attrdata-*属性,从来没有出现过问题。 这里有一个实时版本,已经测试过IE6、IE7和IE9的兼容性。我目前无法测试IE8,但是,我从未遇到过任何问题。


1
我意识到问题所在了。我将它放在了一个基于CSS3媒体查询的if语句中。这是因为IE8或更低版本不支持媒体查询。感谢您提供的可行示例! - ryanve

5

我在IE中使用attr()没有遇到任何问题。列出的错误描述如下:

JQuery函数 .attr 在IE中不起作用,当属性是事件时,例如.attr("onchange","alert('Hello event onchange!')");。 这是因为IE不理解这个。 如果是IE,您可以检查属性是否为事件,如果是,则使用eval函数。

具体来说,它与事件有关。 普通属性不应该成为问题。


4
请尝试这样做:$this.data('websrc');,而不是使用$this.attr('data-websrc');

任何一种都可以。使用"data"访问"data-*"属性只会增加一层复杂性。 - T.J. Crowder
@abdullah 这两种方法在FF/Chrome/Safari/Opera中肯定有效,但在IE中似乎都不起作用。 - ryanve
@T.J. Crowder 感谢您的评论。我明白了。但是我建议楼主只需使用这个,如果问题可以解决。 - thecodeparadox
@T.J. 复杂了吗?你认为哪种方法更快? - ryanve
@ryanve:在正常使用情况下,我怀疑两者都不会 明显 快,你必须要进行一个非常紧密的循环才能注意到区别,但是 jQuery 的 data 不仅仅限于 data-* 属性(详见文档)。最好的方法是,data 最终将执行 attr 所做的任何事情,因此我直接通过 attr 进行操作。 - T.J. Crowder
@T.J. 懂了,这很有道理。我想这里的优点就是 data() 看起来更简洁。 - ryanve

1

我有一个类似的问题。我有一些表单,我想轻松地设置字段是否必填。我的表单输入看起来像这样:

< input id="myid" name="myname" type="text" required="true" />

它在除了IE9以外的所有东西上都运行得很好!糟糕!

问题是我不想用jQuery设置新属性,也不想扩展输入元素的原型......我只想有一个在所有浏览器中都能正常工作且没有太多额外代码或分支的解决方案。

我尝试了jQuery的prop()方法,但是它还需要手动设置。我想要的是能够将所有DOM元素加载并以那种方式提取数据的东西。

我发现jQuery的attr()方法适用于除IE9外的所有浏览器。经过一番摸索,我意识到该属性存在,但在IE9上读取时处理方式有所不同。

所以,我最终是通过以下方式重新调用值的:

var val = $('#elementID').attr('required') || $('#elementID')[0].getAttribute('required');

虽然不是完美的解决方案,但它非常有效,而且不需要我回去使用"data-"重命名属性或在DOM加载后再分配它们。

如果jQuery 1.6.x能够为我们添加attr()和prop()方法的这种改变,那该多好啊!

如果有人知道一个更优雅的解决方案(而且不需要在页面加载后设置属性),请让我知道。


1

如果你使用大小写混合的属性名称,attr() 在 IE 中可能会失败。请确保为你的属性名称使用全小写字母。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接