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

Question

如何用 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>

Answer 1

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

为了做到这一点，我简单地通过document.onclick = removeHighlight;添加了一个事件监听器（ removeHighlight() ） document.onclick = removeHighlight; click事件的整个document 。 因此，无论何时单击 DOM 中的任何位置，都会触发该事件侦听器。 我在 EventListener 函数中所做的是当且仅当单击事件不是通过单击产品或颜色触发时，从所有产品中删除类highlight 。 此外，我设置了overlay=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>

提琴手

Answer 2

当行为是在除要单击的标签之外的任何地方发生的单击事件的结果时，将document对象注册为单击事件侦听器并通过事件委托控制所有单击是最有效的。

1. 将document对象注册为单击事件侦听器

   document.onclick = selectPath;

2. 点击事件处理程序是selectPath(e)
   1. 将所有.product收集到一个 NodeList 中

      const paths = document.querySelectorAll('.product');

   2. 如果用户点击任何.product删除.highlight所有类.product ，然后添加.highlight类的.product点击用户

      if (e.target.matches('.product')) { paths.forEach(path => path.classList.remove('highlight')); e.target.classList.add('highlight');

   3. 但是如果用户点击了任何.color ，然后获取它的[data-hex]值，并用十六进制颜色填充.highlight如果它存在（re: .highlight ）

       else if (e.target.matches('.color')) { let hex = e.target.dataset.hex; let selected = document.querySelector('.highlight'); if (selected) selected.style.fill = hex;

   4. 否则只需删除.highlight类（如果存在）。

       paths.forEach(path => path.classList.remove('highlight')); 

 document.onclick = selectPath; function selectPath(e) { const paths = document.querySelectorAll('.product'); if (e.target.matches('.product')) { paths.forEach(path => path.classList.remove('highlight')); e.target.classList.add('highlight'); } else if (e.target.matches('.color')) { let hex = e.target.dataset.hex; let selected = document.querySelector('.highlight'); if (selected) selected.style.fill = hex; } else { paths.forEach(path => path.classList.remove('highlight')); } };

 body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .container { height: 200px; width: 200px; } .svg { position: relative; z-index: 2; background-size: 100%; background-repeat: no-repeat; background-position: 50%; mix-blend-mode: multiply; } path { fill: #CCCCCC; } .background { position: absolute; top: 0; left: 0; height: 200px; width: 200px; height: auto; z-index: 1; } .circles { position: fixed; bottom: 2em; right: 2em; z-index: 3; } .color { display: inline-block; 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 class="container"> <svg class="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 class="background" src="boxes.jpg" alt=""> </div> <div class="circles"> <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>

Answer 3

您仅为产品设置“突出显示”类，因此您不需要 id 来了解您将要做的事情。

您可以检查您单击的元素是否具有“产品”类，然后首先删除所有“突出显示”类，然后将其添加到单击的产品中。 如果元素没有“产品”类，那么您只需删除所有“突出显示”类。

 window.onload = function(){
   document.onclick = function(e){
     if(e.target.classList.contains("product")){
       resetClass()
       e.target.classList.add("highlight")
     }else{
         resetClass()
     }
   };
 };



 function resetClass(){
   document.querySelectorAll(".highlight").forEach(item => {
         item.classList.remove("highlight")
   })
 }