Chacun, attr, ou ceci?

Question

Je ne suis pas sûr si j'ai besoin de la fonction each() ici ou si je peux le faire en quelque sorte avec this. J'essaie de changer l'attribut src basé sur l'instruction if. Cela fonctionne sauf qu'il les passe à hifi1.jpg. Comment est-ce que je fais en sorte que chaque valeur de imgdata-websrc s'applique à elle-même?

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

Mise à jour: Solution:

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

Cela fonctionne dans les navigateurs qui prennent en charge les attributs des données personnalisées, qui, de mes tests, je l'ai trouvé pour signifier FF/Chrome/Opera/Safari. Peut-être IE9. Je pense que getAttribute peut être utilisé pour IE (plus ancien).

Answer 1

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

Il appliquait à la fois, parce que vous l'appliquer à l'ensemble de l'objet jQuery airsrc.

Vous avez dû faire référence spécifiquement l'élément en cours avec $(this)

ou ...

le faire comme le code ci-dessus, qui attribue $(this) à $this afin de le mettre en cache, pour éviter d'autres recherches. Ensuite, vous obtenez ses données et changez son attribut.

Answer 2

airsrc.attr('src', src); devrait être $(this).attr('src', src); et tout sera merveilleux

Answer 3

Vous voulez utiliser this à l'intérieur du chacun pour obtenir l'élément spécifique pour cette itération, enveloppé dans jQuery, bien sûr. Avec quelques petites optimisations ...

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

Notez que si vous vérifiez l'état en dehors du each, il suffit de le faire une fois. En outre, vous pouvez éviter de reconstituer le jQuery de this en l'affectant à une variable puis en le réutilisant.

Answer 4

Vous pouvez rendre votre code beaucoup plus court en utilisant une caractéristique de la méthode attr:

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