根据变体颜色更改产品图像

Question

我的目标的在线示例：

我试图在分类页面上显示自行车产品。每个产品上都有一种不同的边框颜色，我用圆形div来显示。

当我点击一种颜色时，图像应该会发生变化，正如你在专业网站上看到的那样：（产品图像下方）专业示例。

我自己的网站

您可以在这里看到我自己的示例：我自己的网站示例（向下滚动，直到您看到具有多个产品的产品）。

我的目标功能：

当我单击绿色div时，我想显示图片2，当我单击红色div时，我想看到图片3，但默认情况下，它将始终是冷杉

• 第一个颜色=第一个图像
• 第二个颜色=第二个图像
• 等等

我的超文本标记语言：

<div class="frameColors">
    <div class="frameColor" data-color="#95BD40" style="background-color:#95BD40"></div>
    <div class="frameColor" data-color="#000000" style="background-color:#000000"></div>
    <div class="frameColor" data-color="#C6352D" style="background-color:#C6352D"></div>
</div>
<a href="/produkter/cykler/mountain-bikes/specialized/epic-hardtails/epic-hardtail/">
    <div class="categoryImage" data-frame-color="95BD40">
        <img src="/media/1072/165519.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200748910000000" class="productImage">
    </div>
    <div class="categoryImage" data-frame-color="000000">
        <img src="/media/1071/165518.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200746750000000" class="productImage">
    </div>
    <div class="categoryImage" data-frame-color="C6352D">
        <img src="/media/1073/166762.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200749050000000" class="productImage">
    </div>
</a>

本人姓名：

  var imageIds = item.GetPropertyValue<string>("productImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
  var images = Umbraco.Media(imageIds);

     <div class="frameColors">
                @foreach (var bikeColor in images)
                {
                    var color = bikeColor.GetPropertyValue("frameColor");

                    <div class="frameColor" data-color="#@color" style="background-color:#@color"></div>
                }
            </div>

            <a href="@item.Url">
                @foreach (var img in images)
                {        
                    <div class="categoryImage" data-frame-color="@img.GetPropertyValue("frameColor")">
                        <img src="@img.GetCropUrl("product image")" class="productImage" />
                    </div>
                }
            </a>

Answer 1

根据Adeneo的回复，我设法修改了一点代码，使其按我想要的方式运行。

首先，我添加了一个css行：.分类图像{显示：无；}以隐藏所有产品图像。

然后，我根据Adeneo的回复添加了脚本。我从定位. frameColordiv的每一个开始，在其中，我添加了以下行来显示第一张图像：分类mage.first（）. show（）；

如果不包括CSS行，默认情况下将显示所有产品图像，因此有必要隐藏所有图像，并在脚本中显示第一个图像。

    $(function () {
    $(".frameColor").each(function () {
        var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
        categoryImage.first().show();

        if ($(categoryImage).length > 1) {

            $(this).on('click', function () {
                var color = $(this).data('color').replace('#', '');

                $(categoryImage).hide().filter(function () {
                    return $(this).data('frame-color') === color;
                }).show();
            });
        }
        else {
            $(this).hide();
        }
    });
});

Adeneo提供了原始脚本。