电子商务网站的产品定制

Question

我计划创建一个在线家具电子商务网站。

我目前有一些产品定制页面选项，如颜色、木材类型、高度和宽度，以及一些附加组件，如镜子和一些标志。

当用户选择某种定制选项(如颜色(时，我是否可以对产品定制页面中显示的图像进行相应更新。

例如，页面中显示的图像是一个棕色的橱柜，但当用户选择蓝色时，橱柜颜色将更新为蓝色橱柜。然后，如果用户想在橱柜中添加另一个镜子，则图像将更新为带镜子的蓝色橱柜。

我可以参考任何与这些领域相关的文章或教程吗？

Answer 1

Roxas，我已经为您创建了一个代码片段，您可以单击下面的运行片段按钮来查看代码执行您试图实现的

$(document).ready(function(){
$(".red-circle").click(function(){
$(".color").addClass("red");
$(".color").removeClass("blue");
$(".color").removeClass("green");
});

$(".blue-circle").click(function(){
$(".color").addClass("blue");
$(".color").removeClass("red");
$(".color").removeClass("green");
});

$(".green-circle").click(function(){
$(".color").addClass("green");
$(".color").removeClass("red");
$(".color").removeClass("blue");
});

$(".circle-pick").click(function(){
$(".color").addClass("circle");
$(".color").removeClass("star");
$(".color").removeClass("square");
});

$(".square-pick").click(function(){
$(".color").addClass("square");
$(".color").removeClass("star");
$(".color").removeClass("circle");
});

$(".star-pick").click(function(){
$(".color").addClass("star");
$(".color").removeClass("square");
$(".color").removeClass("circle");
});
});

.red-circle
{
background: red;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.blue-circle
{
background: blue;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.green-circle
{
background: green;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.color
{
background: black;
}
.red
{
background: red;
}
.blue
{
background: blue;
}
.green
{
background: green;
}
.color
{
width: 100px;
height: 100px;
border-radius: 0;
display: block;
margin: 0 auto;
}
h2
{
text-align: center;
}
.square-pick, .circle-pick
{
background:black;
height: 20px;
width: 20px;
margin-right: 5px;
float: left;
}
.square, .square-pick
{
border-radius: 0;
}
.circle, .circle-pick
{
border-radius: 100px;
}

.color.star, .color.star:after, .color.star:before
{
border-bottom-color: black;
background: transparent;
}

.red.star, .red.star:after, .red.star:before
{
border-bottom-color: red;
background: transparent;
}

.blue.star, .blue.star:after, .blue.star:before
{
border-bottom-color: blue;
background: transparent;
}

.green.star, .green.star:after, .green.star:before
{
border-bottom-color: green;
background: transparent;
}
.star {
// margin: 50px 0;
position: relative;
text-align: center;
display: block;
color: black;
width: 0px;
height: 0px;
border-right:  50px solid transparent;
border-bottom: 35px solid;
border-left:   50px solid transparent;
-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);
}
.star:before {
border-bottom: 40px solid;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -23px;
left: -33px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform:    rotate(-35deg);
-ms-transform:     rotate(-35deg);
-o-transform:      rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -53px;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid;
border-left: 50px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform:    rotate(-70deg);
-ms-transform:     rotate(-70deg);
-o-transform:      rotate(-70deg);
content: '';
}
.star-pick {
float: left;
margin: 10px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right:  20px solid transparent;
border-bottom: 14px  solid black;
border-left:   20px solid transparent;
-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);
}
.star-pick:before {
border-bottom: 16px solid black;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -9px;
left: -13px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform:    rotate(-35deg);
-ms-transform:     rotate(-35deg);
-o-transform:      rotate(-35deg);
}
.star-pick:after {
position: absolute;
display: block;
color: black;
top: 3px;
left: -21px;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid black;
border-left: 20px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform:    rotate(-70deg);
-ms-transform:     rotate(-70deg);
-o-transform:      rotate(-70deg);
content: '';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Color Box</h2>
<div class="color" ></div>
<br/>
<p>Click a color</p>
<div class="red-circle"></div>
<div class="blue-circle"></div>
<div class="green-circle"></div>
<br/>
<p>Click a shape</p>
<div class="circle-pick"></div>
<div class="square-pick"></div>
<div class="star-pick"></div>