javascript - 每个，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 以便缓存它，以避免进一步查找。然后你得到它的数据并改变它的属性。