Question

我（在该网站的成员的帮助下）创建了一个金属建筑颜色可视化工具，该可视化工具可以在here中找到。由于某些原因，我无法附加代码段，但在下面的注释中有完整代码的链接。一切正常，但有故障。当我从左到右单击颜色时，我没有问题。但是，当单击从右到左的颜色时，图像层将保持在上一个图像层的上方。有没有办法来解决这个问题？我的想法是，当单击色样时，上一层将被清除。我不确定这是否行得通。预先感谢。

Answer 1

之所以只能从左到右而不是相反，是因为所有图像元素都堆叠在一起。因此，当您显示一个图像时，这将阻止显示其下的所有其他图像。设置html的方式会阻止您正确使用切换开关来隐藏div。

简单的解决方案是在切换之前隐藏该图像组中的所有其他元素（墙壁组，门组等）。我添加了一些将图像分组在一起的div，当您单击图像时，它会抓住父div，然后循环遍历，以隐藏该图像组中所有未单击的图像。然后，它像平常一样切换点击的图像。

这可能不是执行此操作的最佳方法。理想情况下，我将重新设计html，以便每组仅使用一个div，并将图像注入div。但是，这应该适用于您的代码结构。

<!DOCTYPE html>
<html>
<style>
  .mySlides {
    display: none;
    position: absolute;
  }
  
  .active {
    display: block;
  }
</style>
<script>
  var slideIndex = 1;

  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

  function currentDiv(n) {
    showDivs(slideIndex = n);
  }

  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    if (n > x.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = x.length
    }
    var children = x[slideIndex - 1].parentElement.getElementsByTagName('img')
    var clickedElement = x[slideIndex - 1]
    for (var i = 0; i < children.length; i++) {
      if (children[i] != clickedElement) {
        children[i].classList.remove("active");
      }
    }
    clickedElement.classList.toggle("active");
  }
</script>

<body>
  WALL COLOR:
  <img onclick="currentDiv(1)" src="BAG.png" />
  <img onclick="currentDiv(2)" src="BBS.png" />
  <img onclick="currentDiv(3)" src="BCB.png" />
  <img onclick="currentDiv(4)" src="BCG.png" />
  <img onclick="currentDiv(5)" src="BHB.png" />
  <img onclick="currentDiv(6)" src="BKB.png" />
  <br> ROOF COLOR:
  <img onclick="currentDiv(7)" src="BAG.png" />
  <img onclick="currentDiv(8)" src="BBS.png" />
  <img onclick="currentDiv(9)" src="BCB.png" />
  <img onclick="currentDiv(10)" src="BCG.png" />
  <img onclick="currentDiv(11)" src="BHB.png" />
  <img onclick="currentDiv(12)" src="BKB.png" />
  <br> TRIM COLOR:
  <img onclick="currentDiv(13)" src="BAG.png" />
  <img onclick="currentDiv(14)" src="BBS.png" />
  <img onclick="currentDiv(15)" src="BCB.png" />
  <img onclick="currentDiv(16)" src="BCG.png" />
  <img onclick="currentDiv(17)" src="BHB.png" />
  <img onclick="currentDiv(18)" src="BKB.png" />
  <br> DOOR COLOR:
  <img onclick="currentDiv(19)" src="BAG.png" />
  <img onclick="currentDiv(20)" src="BBS.png" />
  <img onclick="currentDiv(21)" src="BCB.png" />
  <img onclick="currentDiv(22)" src="BCG.png" />
  <img onclick="currentDiv(23)" src="BHB.png" />
  <img onclick="currentDiv(24)" src="BKB.png" />
  <br>
  <div class="w3-content" style="max-width:800px;position: relative;">
    <div class="wall-colors">
      <img src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%;position: absolute ;z-index:-1">
      <img class="mySlides" src="http://metaldepotinc.com/WAG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/WBS.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/WCB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/WCG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/WHB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/WKB.png" style="width:100%">
    </div>
    <div class="roof-colors">
      <img class="mySlides" src="http://metaldepotinc.com/RAG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/RBS2.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/RCB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/RCG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/RHB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/RKB.png" style="width:100%">
    </div>
    <div class="trim-colors">
      <img class="mySlides" src="http://metaldepotinc.com/TAG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/TBS.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/TCB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/TCG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/THB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/TKB.png" style="width:100%">
    </div>
    <div class="door-colors">
      <img class="mySlides" src="http://metaldepotinc.com/DAG.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/DBS.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/DCB2.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/DCG2.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/DHB.png" style="width:100%">
      <img class="mySlides" src="http://metaldepotinc.com/DKB.png" style="width:100%">
    </div>
  </div>
  <div class="as-console-wrapper">
    <div class="as-console"></div>
  </div>
</body>

</html>

单击时清除图像（带有HTML和Javascript的Color Visualizer）

1 个答案: