Better way to write jquery add/remove class

Question

I'm not an expert on JS and jQuery, but I would like to improve my knowledge.

I made this code that works for me, but I'm sure it can be done better. can you help me and explain how to synthesize it? It's a piece of a slideshow when a URL is activated via a button, some images disappear and another appears.

<script>
  $(".green").click(function(e){
      window.location = "#img_green";
      $('#piz_green').css("display", "block");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".army").click(function(e){
      window.location = "#img_army";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "block");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".red").click(function(e){
      window.location = "#img_red";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "block");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".white").click(function(e){
      window.location = "#img_white";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "block");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".blue").click(function(e){
      window.location = "#img_blue";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "block");
      $('#piz_black').css("display", "none");
  });
  $(".black").click(function(e){
      window.location = "#img_black";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "block");
  });
</script>

Thank you.

Answer 1

To improve this code we also can improve html a little. We can add some class to identify elements and controls and after that - we might need only 6 lines of js

Please try this

$(".your-button-class").click(function(e) {
  const color = e.target.dataset.color;
  window.location = "#img_" + color;
  $('.your-div-class').css("display", "none");
  $('div[data-color=' + color + ']').css("display", "block");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button class="your-button-class" data-color="green">green</button>
  <button class="your-button-class" data-color="army">army</button>
  <button class="your-button-class" data-color="red">red</button>
  <button class="your-button-class" data-color="white">white</button>
  <button class="your-button-class" data-color="blue">blue</button>
  <button class="your-button-class" data-color="black">black</button>
</div>

<div class="your-div-class" data-color="green">green</div>
<div class="your-div-class" data-color="army">army</div>
<div class="your-div-class" data-color="red">red</div>
<div class="your-div-class" data-color="white">white</div>
<div class="your-div-class" data-color="blue">blue</div>
<div class="your-div-class" data-color="black">black</div>