jQuery显示/隐藏多个画廊

Question

我在一个页面上有三个画廊，希望它们用简单的jQuery显示/隐藏技术来显示。

图库效果很好，但未来可能会有更多的预览图库。

到目前为止我做了什么：

<p>

https://jsfiddle.net/stef75/ah3Lxkdy/

需要一些帮助来在这里添加更多通用代码：）

提前谢谢！

Answer 1

您可以使用html数据属性

来完成

＆＃13;

＆＃13;

$(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
  });

});

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;