Друг, attr или это?

Question

Я не уверен, нужна ли мне здесь функция each() или я могу как-то сделать это с помощью this. Я пытаюсь переключить атрибут src на основе оператора if. Это работает за исключением того, что он переключает их обоих на 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 для его кэширования, чтобы избежать дальнейших поисков. Затем вы получите его данные и измените его атрибут.

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, вам нужно будет сделать это только один раз. Кроме того, вы можете избежать воссоздания jQuery this, присвоив его переменной, а затем повторно используя.

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