Question

我的目标的在线示例：

我正在尝试在类别页面上展示自行车产品。在每个产品上有一个框架变体颜色，我正在使用圆形div显示。

当我点击一种颜色时，图像应该会在专业网站上看到:(在产品图片下方）Specialized Example。

我自己的网站

您可以在此处查看我自己的示例：My own website example（向下滚动，直到您看到包含多个产品的产品）。

我的目标功能：

当我点击绿色div时，我想显示图片2，当我点击RED div时，我想看到图像3，但是作为默认它将永远是第一个

第一种颜色=第一张图片
第二种颜色=第二张图片
等等

我的HTML：

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

我的Foreach（s）：

  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行：.categoryImage { display:none; }来隐藏所有产品图片。

然后我根据Adeneo的回复添加了脚本。我开始定位每个.frameColor div的内容，在其中，我添加了以下行以显示第一张图片：categoryImage.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以提供原始剧本。

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

1 个答案: