Question

我不确定我是否需要此each()功能，或者我是否可以this以某种方式执行此操作。我正在尝试根据if语句切换src属性。除了将它们都切换到hifi1.jpg之外，它都有效。如何制作，以便将每个img的{{1}}值应用于自身？

HTML：

data-websrc

JS：

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

更新：解决方案：

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);
        }
    });
});

适用于支持自定义数据属性的浏览器，从我的测试中我发现这意味着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以便对其进行缓存，以避免进一步的查找。然后你得到它的数据并改变它的属性。

Answer 2

当然，您需要在每个内部使用this来获取该迭代的特定项目，包装在jQuery中。经过一些小的优化......

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

请注意，如果您检查each之外的条件，则只需执行一次。此外，您可以避免重构this的jQuery，将其分配给变量然后重复使用。

Answer 3

airsrc.attr('src', src);应为$(this).attr('src', src);，一切都会很精彩

Answer 4

您可以使用attr方法的一项功能缩短代码：

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

每个，attr还是这个？

4 个答案: