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