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

我将其放在 head 中（在 jQuery 库之后），以便它在渲染 HTML 时添加 src。这适用于 iPhone（或宽度小于 480 像素的 Firefox）并且不会加载图像，所以这很棒。

问题是，在 480px 以上，当我尝试循环浏览图像时，它几乎可以工作，因为 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]);
});