How to select multiple classes onclick?

Working on tutorials and trying some things out for a project. My question is, how do I highlight multiple classes on click and change the colour of the selected boxes, instead of only one box?

For example, when selecting a box, I can select not just a single class, but multiple class, then change multiple classes as the same color?

let overlay;
document.querySelectorAll('#product-a, #product-b, #product-c').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");
  overlay.style.fill = hex;
}
#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;
}

.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 id="product-a" class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path id="product-b" class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path id="product-c" 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>

1 answer

  • answered 2021-06-23 07:46 Harshsetia

    Please check this snippet, it will helps you.

      $(document).ready(function(){
        $("#product-svg .product").click(function(){
          $(this).toggleClass("selected");
        });
      });
    
        $(document).ready(function(){
          $(".color").click(function(){
            var colorvalue = $(this).css("background-color");
                    $(".product.selected").css("fill", colorvalue );
    
          });
        });
    #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;
        }
        
        .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;
        }
        .product.selected {outline: 5px solid #000;}
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <div id="container">
    
        <svg id="product-svg" viewBox="0 0 744 1074">
          <path id="product-a" class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
          <path id="product-b" class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
          <path id="product-c" 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>