时间戳

首页 > 解决方案 > 如何使用 ID 而不是类添加或删除？

javascript - 如何使用 ID 而不是类添加或删除？

问题描述

如何用 id 替换类突出显示，所以当我单击产品外部时，它不会突出显示该区域？

我将 window.onload 部分包含在我想要做的事情中，但是我不知道如何将类突出显示更改为 id。我想不出比更改类然后使用 window.onload 更简单的方法。

let overlay;
document.querySelectorAll('.product').forEach(function(path) {
  path.onclick = chooseProduct;
})

function chooseProduct(e) {
  if (overlay) overlay.classList.remove('highlight')
  overlay = e.target
  overlay.classList.add('highlight')
}

//What I want to add to the highlight class using id to remove black border when click outside of the products

// window.onload = function(){
//   var hide = document.getElementById('?');
//   document.onclick = function(e){
//     if(e.target.id !== '?'){
//       hide.style.display = 'none';
//     }
//   };
// };


var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  if (overlay) overlay.style.fill = hex;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}
<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

标签： javascripthtmlcss

解决方案

您的代码按预期工作，除了您在问题中提到的突出显示样式的部分在您单击产品外部时不会被删除。

为了做到这一点，我只需在整个on事件中添加一个事件侦听器 ( removeHighlight()) 。因此，每当您单击 DOM 中的任何位置时，都会触发该事件侦听器。我在 EventListener 函数中所做的是，当且仅当单击产品或颜色未触发单击事件时，才从所有产品中删除该类。此外，我设置 是为了删除先前选择的产品的参考，然后单击颜色不会在满足相同条件的情况下用所选颜色填充先前选择的产品，直到您再次单击产品。document.onclick = removeHighlight;documentclickhighlightoverlay=null

let overlay;
document.querySelectorAll('.product').forEach(function(path) {
  path.onclick = chooseProduct;
})

function chooseProduct(e) {
  if (overlay) overlay.classList.remove('highlight')
  overlay = e.target
  overlay.classList.add('highlight')
}

var removeHighlight = function(e) { 
    var products = document.querySelectorAll('.product');
   
    if(!e.target.classList.contains('product') && !e.target.classList.contains('color')){
        overlay = null;
        document.querySelectorAll('.product').forEach(function(prod){
            prod.classList.remove('highlight');
        });
    }
}

document.onclick = removeHighlight; 


var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  if (overlay) overlay.style.fill = hex;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}
<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

jsfiddle

推荐阅读