javascript - 在div中显示正面和背面图像

我有一个网站，允许用户拍照和选择他们想要的t恤颜色我想知道如何在下面的黑框中显示t恤背面的图像。如果我选择一件黄色衬衫，我希望衬衫的背面在下图中是黄色的。如果我选择改变衬衫的颜色

 function fctCheck(gender) {
   var elems = document.getElementsByName("subselector");
   for (var i = 0; i < elems.length; i++) {
     elems.item(i).style.display = "none";
   }
   document.getElementById(gender).style.display = "block";
 }


 $('#men').on('change', function() {
   $("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none');
 });



 $(document).ready(function() {
   $('.colore.active').each(function() {
     $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
   });
   $('.colore').on('click', function() {
     $('.container').css('src', '');
     $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
   });
 });

.container7 {
  background-color: black;
  width: 150px;
  height: 150px;
  border: .025px solid;
  position: absolute;
  bottom: 0;
}
.container {
  background-color: transparent;
  width: 490px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  /* Will stretch to specified width/height */
  background-size: 490px 500px;
  background-repeat: no-repeat;
}
.container2 {
  background-color: lightgrey;
  width: 200px;
  height: 300px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}
.colore {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}
.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #00FF00;
}
.green {
  background: #45C731;
}
.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}
.blue {
  background: #1713F6;
}
.purple {
  background: #800080;
}
.black {
  background: #000000;
}
​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<center>
  <div id="box" class="container" style="float:left;"></div>
</center>

<div class="container2" style=" float: left;">
  <select id="Gender" onchange="fctCheck(this.value);">
    <option value="">Choose Gender</option>
    <option value="men">Men</option>

  </select>
  <br>
  <br>
  <select id="men" name="subselector" style="display:none">
    <option value="">Choose an item</option>
    <option value="tsm">T-Shirt</option>

  </select>





  <div style='display:none;' id="mtsm">
    <div class="colore white active" data-image="http://amp.site88.net/shirts/white.jpg">
    </div>
    <div class="colore black" data-image="http://amp.site88.net/shirts/black.jpg">
    </div>
    <div class="colore yellow" data-image="http://amp.site88.net/shirts/yellow.jpg">
    </div>
    <div class="colore orange" data-image="http://amp.site88.net/shirts/orange.jpg">
    </div>
    <div class="colore red" data-image="http://amp.site88.net/shirts/red.jpg">
    </div>
  </div>
  <div class="container7" style="float:center;"></div>
</div>

希望它也能根据我的选择而改变。

最佳答案

function fctCheck(gender) {
  var elems = document.getElementsByName("subselector");
  for (var i = 0; i < elems.length; i++) {
    elems.item(i).style.display = "none";
  }
  document.getElementById(gender).style.display = "block";
}


$('#men').on('change', function() {
  $("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none');
});



$(document).ready(function() {
  $('.colore.active').each(function() {
    $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
  });
  $('.colore').on('click', function() {
    $('.container').css('src', '');
    $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
    $('.container7').css('background-image', 'url(' + $(this).data("image-back") + ')');
  });
  $('#toggler').click(function() {
    var tmp = $('.container').css('background-image');
    $('.container').css('background-image', $('.container7').css('background-image'));

    $('.container7').css('background-image', tmp);
  });
});

.container7 {
  background-color: black;
  width: 150px;
  height: 150px;
  border: .025px solid;
  position: absolute;
  bottom: 0;
}
.container {
  background-color: transparent;
  width: 490px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  /* Will stretch to specified width/height */
  background-size: 490px 500px;
  background-repeat: no-repeat;
}
.container2 {
  background-color: lightgrey;
  width: 200px;
  height: 300px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}
.colore {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}
.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #00FF00;
}
.green {
  background: #45C731;
}
.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}
.blue {
  background: #1713F6;
}
.purple {
  background: #800080;
}
.black {
  background: #000000;
}
​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<center>
  <div id="box" class="container" style="float:left;"></div>
</center>

<div class="container2" style=" float: left;">
  <button id="toggler">TOGGLE BACK-FRONT VIEW</button>
  <select id="Gender" onchange="fctCheck(this.value);">
    <option value="">Choose Gender</option>
    <option value="men">Men</option>

  </select>
  <br>
  <br>
  <select id="men" name="subselector" style="display:none">
    <option value="">Choose an item</option>
    <option value="tsm">T-Shirt</option>

  </select>





  <div style='display:none;' id="mtsm">
    <div class="colore white active" data-image="http://amp.site88.net/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
    </div>
    <div class="colore black" data-image="http://amp.site88.net/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/white.jpg">
    </div>
    <div class="colore yellow" data-image="http://amp.site88.net/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
    </div>
    <div class="colore orange" data-image="http://amp.site88.net/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
    </div>
    <div class="colore red" data-image="http://amp.site88.net/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
    </div>
  </div>
  <div class="container7" style="float:center;"></div>
</div>

编辑：
根据要求，添加了一个切换按钮来切换前/后视图

关于javascript - 在div中显示正面和背面图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38555742/