Question

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

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

是否可以编写一种方式，当用户选择某些自定义选项（例如颜色）时，产品定制页面上显示的图像将相应更新。

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

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

Answer 1

Roxas，我为您创建了一个代码段，您可以单击下面的run snippet按钮以查看执行您要实现的代码的代码

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

电子商务网站的产品定制

1 个答案: