问jquery .attr()返回为未定义

EN

<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>

<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>

$(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");
        }
    });
});