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（或宽度小于480像素的Firefox）并且不加载图像，因此非常棒。

问题是，在480px以上，当我试图遍历图像时，它几乎正常工作，因为Firefox的控制台告诉我它无法加载“http://myurl.com/_/img/0 .jpg“，它告诉我它几乎正确连接，但由于某种原因，它打印的是数组的索引，而不是值（我认为）。

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

感谢您的帮助。

Answer 1

对于jQuery.each，第一个回调参数是集合中的 index ，第二个参数是值。

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

使用jQuery循环遍历数组中的img src属性

1 个答案: