编写jquery add / remove类的更好方法

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> 

Answer 2

There is no need for JavaScript here as you can do that with basic CSS as follows.

Use proper links with anchors:

<a href="#img_green">green</a>
<!-- repeat for other colors -->
<a href="#img_black">black</a>

Then use the :target pseudo-class as follows:

#piz_green,
#piz_army,
#piz_red,
#piz_white,
#piz_blue,
#piz_black {
  display: none;
}
#piz_green:target,
#piz_army:target,
#piz_red:target,
#piz_white:target,
#piz_blue:target,
#piz_black:target {
  display: block;
}

And by adding a parent element, you can simplify it as follows:

#container > * {
  display: none;
}
#container > *:target {
  display: block;
}

Answer 3

When I highly suggest the use of common classes in this case, you could always use comma , separator in you selectors with show()/hide() to simplify your code (a little) like :

 $(".green").click(function(e) { window.location = "#img_green"; $('#piz_green').show(); $('#piz_army,#piz_red,#piz_white,#piz_blue,#piz_black').hide(); }); $(".army").click(function(e) { window.location = "#img_army"; $('#piz_army').show(); $('#piz_green,#piz_red,#piz_white,#piz_blue,#piz_black').hide(); }); $(".red").click(function(e) { window.location = "#img_red"; $('#piz_red').show(); $('#piz_green,#piz_army,#piz_white,#piz_blue,#piz_black').hide(); }); $(".white").click(function(e) { window.location = "#img_white"; $('#piz_white').show(); $('#piz_green,#piz_army,#piz_red,#piz_blue,#piz_black').hide(); }); $(".blue").click(function(e) { window.location = "#img_blue"; $('#piz_blue').show(); $('#piz_green,#piz_army,#piz_red,#piz_white,#piz_black').hide(); }); $(".black").click(function(e) { window.location = "#img_black"; $('#piz_black').show(); $('#piz_green,#piz_army,#piz_red,#piz_white,#piz_blue').hide(); }); 

Another suggestion with no need to change your HTML structure:

 $(".green, .army, .red, .white, .blue, .black").click(function(e) { var color = $(this).prop('class'); window.location = "#img_" + color; $('[id^=piz_]').hide(); $('#piz_' + color).show(); }); 

Answer 4

Data attributes on the elements and a common class would make your life easier

 var slides = $(".slide"); // reference all the slides $("[data-action").on("click", function(e){ // bind the click var btn = $(this); // button that was clicked var color = btn.data("action"); // get the color slides.attr("hidden", true); // hide all the slides $("#piz_" + color).removeAttr("hidden"); // show the clicked color window.location.hash = "img_" + color; // update the hash }); 

 [hidden] { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-action="green">Green</button> <button data-action="red">Red</button> <button data-action="blue">Blue</button> <div class="slide_wrapper"> <div class="slide" id="piz_green">green</div> <div class="slide" id="piz_red">red</div> <div class="slide" id="piz_blue">blue</div> </div> 

Answer 5

function slideshow(image_id, block_id){
      window.location = image_id;
      $("[id^=piz_]").css("display", "none");
      $(block_id).css("display", "block");
  }

  $(".green").click(function(e){
      slideshow("#img_green", "#piz_green");
  });

Answer 6

Here is the solution I would go with. First I would add an arbitrary data attribute, in this case, colour. Then I would add all my buttons with a corresponding data attribute. Then attach to the click event of those buttons and call the following code.

 $('[data-action=toggle]').click(function(e){ $('div[data-color]:not([data-color=' + e.target.dataset.color + '])').hide(); $('div[data-color=' + e.target.dataset.color + ']').show(); }) 

 a{ margin-right: .5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-color="green">green</div> <div data-color="red">red</div> <div data-color="blue">blue</div> <div data-color="pink">pink</div> <div data-color="yellow">yellow</div> <a href="#" id="green" data-action="toggle" data-color="green">Green</a> <a href="#" id="green" data-action="toggle" data-color="red">Red</a> <a href="#" id="green" data-action="toggle" data-color="blue">Blue</a> <a href="#" id="green" data-action="toggle" data-color="pink">Pink</a> <a href="#" id="green" data-action="toggle" data-color="yellow">Yellow</a> 

Answer 7

You can consider attribute selector to hide all the element at once. Make sure to call hide() before show()

 $(".green").click(function(e) { window.location = "#img_green"; $('[id^=piz]').hide(); $('#piz_green').show(); }); $(".army").click(function(e) { window.location = "#img_army"; $('[id^=piz]').hide(); $('#piz_army').show(); }); $(".red").click(function(e) { window.location = "#img_red"; $('[id^=piz]').hide(); $('#piz_red').show(); }); $(".white").click(function(e) { window.location = "#img_white"; $('[id^=piz]').hide(); $('#piz_white').show(); }); $(".blue").click(function(e) { window.location = "#img_blue"; $('[id^=piz]').hide(); $('#piz_blue').show(); }); $(".black").click(function(e) { window.location = "#img_black"; $('[id^=piz]').hide(); $('#piz_black').show(); }); 

Answer 8

You can store id of the image you want to show as custom data attribute with each button and then hide all images (by giving them a common class) with one line and show only the image you need by it's id from custom data attribute.

Example of button element:

<button data-slideshow-button="green">Green</button>

Example of slideshow element:

<div id="piz_green" class="slideshow-image"></div>

And then just run code like this as click handler:

$('[data-slideshow-button]').click(function(e){
  var showId = $(e.currentTarget).data('slideshowButton');
  window.location = '#img_' + showId;
  $('.slideshow-image').hide();
  $('#piz_' + showId).show();
});

Answer 9

As you did use piz_ for all classes in your HTML, you can easily use them in your JavaScript. For example, if you want to hide them all you can just type: $('[class^=piz_]').hide(); . This will hide all elements where the class starts with piz_ .

Now I made a quick example with this in action. Please know I made just tile and a retry button to give you an example.

 $("[class^=piz_]").click(function(){ // Make all div's with the class piz_* clickable $('[class^=piz_]').hide(); // Hide all elements var classAttr = '.'+$(this).attr("class"); // Get the class from the tile you clicked on $(classAttr).show(); // Show all tiles with the same class }); // This is just to get all tiles back and try it again. $('.retry').click(function() { $('[class^=piz_]').show(); }); 

 .piz_green { background:green; } .piz_blue { background:blue; } .piz_red { background:red; } .piz_orange { background:orange; } div, button { width:100px; height:100px; } .retry { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="piz_green"></div> <div class="piz_blue"></div> <div class="piz_red"></div> <div class="piz_orange"></div> <div class="piz_green"></div> <button class="retry"> Retry! </button>