javascript - 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] 返回底层 HTMLImageElement，它不提供 attr() 方法。尝试用 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');