使用jQuery循环访问img src属性

Question

我正在构建一个响应站点，并且在一个特定页面上，我试图让移动设备（宽度为480或更小）不下载特定图像。我知道我很亲密，我会告诉你为什么在代码之后。

HTML：

<div class="index-section"> 
    <p><img class="scale-with-grid" alt="" /></p> 
    <p><a href="#">A Letter from Person 1&nbsp;<span class="triangle">&#9654;</span></a></p> 
</div> 

<div class="index-section"> 
    <p><img class="scale-with-grid" alt="" /></p> 
    <p><a href="">A Letter from Person 2&nbsp;<span class="triangle">&#9654;</span></a></p> 
</div> 

<div class="index-section"> 
    <p><img class="scale-with-grid" alt="" /></p> 
    <p><a href="">A Letter from Person 3&nbsp;<span class="triangle">&#9654;</span></a></p> 
</div> 

<div class="index-section"> 
    <p><img class="scale-with-grid" alt="" /></p> 
    <p><a href="">A Letter from Person 4&nbsp;<span class="triangle">&#9654;</span></a></p> 
</div> 

它基本上是4分几乎相同的div的。而这里的jQuery的：

$(document).ready(function() { 

var imgPath = '_/img/' 

var $winWidth = $(window).width(); 

var $indexSection = $('.index-section p img'); 

if ($winWidth <= 480) { 
    $indexSection.attr('src',''); 
    $indexSection.css('display','none'); 
    } else { 
     var imgSrc = [ "keith-index.jpg", "derek-video.jpg", "bar-chart.jpg", "honor-roll.jpg" ]; 

     jQuery.each(imgSrc, function(value){ 
      $indexSection.attr('src',imgPath + value); 
     }); 
    } 
}); 

我把这个头（jQuery库后），以便它增加了SRC作为它的渲染HTML。这适用于iPhone（或宽度小于480px的Firefox），并且不会加载图像，所以这很好。

问题是，当我试图循环显示图像时，它大概工作，因为Firefox的控制台告诉我它无法加载“http://myurl.com/_/img/” 0.jpg“，它告诉我它几乎正确连接，但是，出于某种原因，它打印的是数组的索引，而不是数值（我认为）。

我需要的是，如果浏览器比480宽，打印url为每个图像的src属性（“myurl.com/_/img/keith-index.jpg”，其他三个他们各自的div），以便图像加载，例如桌面浏览器。

感谢您的任何帮助。

Answer 1

使用jQuery.each，第一个回调参数是集合中的索引，第二个参数是该值。

jQuery.each(imgSrc, function(index, value){ 
    $indexSection.attr('src',imgPath + value); 
}); 

编辑：哎呦...我错过了你想要做一个更根本的问题。

$indexSection是一个jQuery对象，包含全部您正在使用的图像。当您拨打$indexSection.attr时，您将一次设置所有四个图像的属性。您对imgSrc的每个值执行此操作，因此所有四个图像的src属性最终都会设置为最后的imgSrc值。

取而代之，您希望遍历img标签，并为每个图像从imgSrc访问正确的值。

$indexSection.each(function(index) { 
    $(this).attr('src', imgPath + imgSrc[index]); 
});