我的目标在线示例:
我正在尝试在类别页面上显示自行车产品。在每个产品上都有一个框架变体颜色,我使用圆形div来显示。
当我点击一种颜色时,图像应该会改变,就像你在Specialized网站上看到的那样:(在产品图像下面)Specialized Example.
我自己的网站
你可以在这里看到我自己的例子:我自己的网站的例子(向下滚动,直到你看到多个产品的产品)。
目标功能:
当我点击绿色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&mode=crop&width=500&height=350&rnd=131200748910000000" class="productImage">
</div>
<div class="categoryImage" data-frame-color="000000">
<img src="/media/1071/165518.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200746750000000" class="productImage">
</div>
<div class="categoryImage" data-frame-color="C6352D">
<img src="/media/1073/166762.jpg?anchor=center&mode=crop&width=500&height=350&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>
根据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提供原始脚本。