jQuery的.attr（）返回未定義

Question

下面我有以下的jQuery代碼：

我的HTML：

<div class="input-group top_buffer_small"> 
    <label class="col-md-3 col-sm-3 text_right top_buffer_mini">Available Colors:</label> 
    <div class="col-md-9 col-sm-9 text_right"> 
     <table id="availColors" align="center"> 
      <?php 
       //instantiate color class 
       $colors = $Item->getColors(); 
       $colorCount = $Item->getColorCount(); 
       if($colorCount > 0){ 
        //create a mod since we only want to show 4 colors per row. 
        $remainder = $colorCount%4; 
        $x=0; //counter variable 
        if(is_array($colors)){ 
         foreach ($colors as $key=>$value){ 
          foreach ($value as $color) { 
           if($remainder == 0){ 
            //if we are at 0, make a new row 
            echo "<tr>"; 
           } 
           //print_r($Item->getProductVariations($color)); 
           ?> 
           <td style="background-color:#<?php echo $color;?>" data-pictures="<?php echo htmlspecialchars(json_encode($Item->getProductVariations($color))); ?>" data-directory="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/';?>"></td> 
           <?php 
           if($remainder == 3){ 
            //end the row 
            echo "</tr>"; 
           } 
          //$x++; 
          } 
         } 
        } 
       } 
      ?> 
     </table> 
    </div> 
</div> 

基本上，我試圖讓它們正在從傳遞的數組值我的JavaScript。獲取值後，我試圖讓所有圖像縮略圖在點擊顏色時變爲圖片。

這是我的目標，以改變圖片的縮略圖在div：

<div class="row"> 
    <div class="featured_container_small" id="productThumbnails"> 
      <h5>Other Views</h5> 
      <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div> 
      <!-- <div class="col-md-3 buffer_bottom"><img src="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/'.$smallimage1?>" class=" center_image responsive_image"></div> --> 
      <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div> 
      <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div> 
      <div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"><nbsp></nbsp></div> 
     </div> 
     <div class="clear"></div> 
</div> 

然後，這是我的jquery：

$(function(){ 
    $("#availColors td").click(function(){ 
     var imageDirectory = $(this).attr('data-directory'); 
     var pictures = $(this).attr('data-pictures'); 
     var pictureArray = JSON.parse(pictures); 
     var productThumbnails = $("#productThumbnails img"); 
     var thumbnailCount = productThumbnails.length; 
     var keys = Object.keys(pictureArray); 
     var pic = ""; 
     var src=""; 

     for (var i = 0; i < keys.length; i++) { 
      pic = pictureArray[keys[i]];  
      productThumbnails[i].attr("src",imageDirectory+pic+".jpg"); 
     } 
    }); 
}); 

當我執行我的點擊功能，返回一個錯誤說「未定義不是一個功能「。

我不知道爲什麼它這樣做。請幫助一些。

Answer 1

當您遍歷圖像集合時，productThumbnails[i]返回不提供attr()方法的基礎HTMLImageElement。嘗試用jQuery來包裝它來代替：

$(productThumbnails[i]).attr("src",imageDirectory+pic+".jpg"); 

而且，使用jQuery的時候最好的方式來訪問你的DOM元素相關聯的任意數據使用data()方法：

var imageDirectory = $(this).data('directory'); 
var pictures = $(this).data('pictures'); 

作爲獎勵，你還可以得到反序列化JSON開箱即用，而且也沒有必要JSON.parse()：

var pictureArray = $(this).data('pictures');