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

当我执行我的点击功能时，错误会返回说＆＃34; undefined不是函数＆＃34;。

我不知道为什么会这样做。请帮忙。

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');

jquery .attr（）返回未定义

1 个答案: