每个,attr还是这个？

Question

我不确定我是否需要each()这里的功能,或者我能以某种方式做到这一点this.我正在尝试根据if语句切换src属性.它的工作原理除了它们都切换到hifi1.jpg.我该怎么做才能将每​​个img人的data-websrc价值都应用到自身？

HTML:

<img class="airsrc" src="lofi1.jpg" data-websrc="hifi1.jpg" alt="example1">
<img class="airsrc" src="lofi2.jpg" data-websrc="hifi2.jpg" alt="example2">

JS:

jQuery(document).ready(function($) {
    var airsrc = $('.airsrc');
    airsrc.each(function() {
        if ( Modernizr.mq('(min-width:480px)') ) { 
            var src = $(this).data('websrc'); 
            airsrc.attr('src', src);
        }
    });
});

更新:解决方案:

jQuery(document).ready(function($) {
    if ( Modernizr.mq('(min-width:480px)') ) { 
    $('.airsrc').each(function() {
        var $this = $(this);
        var src = $this.data('websrc');
        if ( src != '' ) { 
            $this.attr('src', src);
        }
    });
    }
});

这适用于支持自定义数据属性的浏览器,从我的测试中我发现这意味着FF/Chrome/Opera/Safari.也许是IE9.我认为getAttribute可以用于(较旧的)IE.

Answer 1

var $this = $(this),
    src = $this.data('websrc'); 
$this.attr('src', src);

它适用于两者,因为您将它应用于整个jQuery对象airsrc.

你必须专门引用当前元素 $(this)

要么...

像上面的代码一样,为了避免进一步的查找而分配$(this)给$this它以便缓存它.然后,您获取其数据并更改其属性.