jQuery表演/隐藏多个画廊

Question

我在一个页面上有三个画廊，希望它们以简单的jQuery show/hide技术显示。

画廊的运作完美，但也许将来还有更多的预览画廊。

到目前为止我所做的事情：

$(document).ready(function(){
$('#gallery1').click(function() {
  $('#gallery').hide();
  $('#previewGallery1').show();
});
$('#showGallery1').click(function() {
  $('#gallery').show();
  $('#previewGallery1').hide();
});
$('#gallery2').click(function() {
  $('#gallery').hide();
  $('#previewGallery2').show();
});
$('#showGallery2').click(function() {
  $('#gallery').show();
  $('#previewGallery2').hide();
});
$('#gallery3').click(function() {
  $('#gallery').hide();
  $('#previewGallery3').show();
});
$('#showGallery3').click(function() {
  $('#gallery').show();
  $('#previewGallery3').hide();
});
});

https://jsfiddle.net/stef75/ah3lxkdy/

需要一些帮助才能在此处添加更多通用代码：(

提前！

Answer 1

您可以使用HTML数据属性

进行操作

$(document).ready(function(){
  $("[data-show-gallery]").click(function() { 
    $('[data-gallery-preview]').hide(); // feel free to use a class here insted
    $('[data-gallery='+$(this).attr("data-show-gallery")+']').show();
  });
  $("[data-close-gallery]").click(function() {// feel free to use a class here insted
    $('[data-gallery-preview]').show(); // feel free to use a class here insted
    $('[data-gallery]').hide(); // feel free to use a class here insted
  });
});

#gallery {
    background: orange;
    width: 100%;
  }
  .previewImage {
    border: 1px solid red;
    background: green;
    height: 250px;
    width: 30%;
    margin: 1%;
    float: left;
    cursor: pointer;
  }
  .previewGallery {
    margin: 1%;
    background: blue;
  }
  [data-gallery] {
    display: none;
  }
  .previewThumb {
    background: orange;
    float: left;
    width: 150px;
    height: 150px;
    margin: 1%;
  }
  
a { color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Above gallery...</div>
<div id="gallery" data-gallery-preview>
  <div class="previewImage" data-show-gallery="1">Preview-Image Gallery 1</div>
  <div class="previewImage" data-show-gallery="2">Preview-Image Gallery 2</div>
  <div class="previewImage" data-show-gallery="3">Preview-Image Gallery 3</div>
</div>
<div style="clear: both;"></div>
<div data-gallery="1">
  <div class="previewGallery">
    <h2>Preview-Gallery 1</h2>
    <div class="previewThumb">thumb 1</div>
    <div class="previewThumb">thumb 2</div>
    <div class="previewThumb">thumb 3</div>
    <div class="previewThumb">thumb 4</div>
    <div class="previewThumb">thumb 5</div>
    <div class="previewThumb">thumb 6</div>
    <div style="clear: both;"></div>
    <a href="#" data-close-gallery>&lt;&lt; back</a>
  </div>
</div>
<div data-gallery="2">
  <div class="previewGallery">
    <h2>Preview-Gallery 2</h2>
    <div class="previewThumb">thumb 1</div>
    <div class="previewThumb">thumb 2</div>
    <div class="previewThumb">thumb 3</div>
    <div class="previewThumb">thumb 4</div>
    <div class="previewThumb">thumb 5</div>
    <div class="previewThumb">thumb 6</div>
    <div style="clear: both;"></div>
    <a href="#" data-close-gallery>&lt;&lt; back</a>
  </div>
</div>
<div data-gallery="3">
  <div class="previewGallery">
    <h2>Preview-Gallery 3</h2>
    <div class="previewThumb">thumb 1</div>
    <div class="previewThumb">thumb 2</div>
    <div class="previewThumb">thumb 3</div>
    <div class="previewThumb">thumb 4</div>
    <div class="previewThumb">thumb 5</div>
    <div class="previewThumb">thumb 6</div>
    <div style="clear: both;"></div>
    <a href="#" data-close-gallery>&lt;&lt; back</a>
  </div>
</div>
<div>Below gallery...</div>