点击合并两组浮标

Question

我有一页折页。当用户单击“设计”链接时，所有相关的设计图像都会显示出来。当用户单击“art”时，将显示所有相关的艺术图像。

我想要的是一个“所有”按钮，它结合了它们。

这两个集合包含在div中，在下面的javascript中完全打开和关闭。我需要的是添加到脚本中，这样就有了这样一个函数-单击所有并同时显示两者，而不是一个或另一个。

当他们都打开的时候，他们会很好地互相交流，所以这不是一个问题。我会尽量保持代码的简洁性。我每一节只有一张照片，但实际上有6-7张。

提前感谢！

我的html是：

<div class="sectiondivider">
             <div id="ThumbLinks">   
                        <a href="#" name="thumbs" id="all">ALL</a>  
                        <a href="#" name="thumbs" id="art">ART</a><br />   
                        <a href="#" name="thumbs" id="gd">GD</a>   
            </div> 
</div>

<div class="thumb_container">
            <div class="thumbs" id="gd_info">
                     <div class="flex_one">
                         <img class="icon-image" src="gd.jpg"/>
                      </div>    
           </div>
           <div class="thumbs" id="art_info">
                     <div class="flex_one">
                         <img class="icon-image" src="art.jpg"/>
                      </div>    
            </div>
</div>

CSS：

.gd_thumbs {
    display:none;
}


.art_thumbs {
    display:none;
}

.icon-image {
    width:100%;
    height:auto;
    opacity:1;
}

.flex_one {
    width:28%;
    float:left;
    position:relative;
    background-color:#000;
    border: solid 2px rgb(0,81,88);
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
}

Javascript

$('#ThumbLinks a').click(function(e) {
     // do something fancy
     return false; // prevent default click action from happening!
     e.preventDefault(); // same thing as above
});

$(document).ready(function(){
     $("div.thumbs:gt(0)").hide();  // to hide all div except for the first one
     $('#ThumbLinks a').click(function(selected) {
        var getID = $(this).attr("id");      
        var projectImages = $(this).attr("name");      

        $("div.thumbs").hide();       
        $("#" + getID + "_info" ).fadeIn( "slow" ); 


    });  
});  

Answer 1

试试这个片段。

它只检查链接的id是否为all，以显示所有内容，如果不是，则继续使用旧代码。我试着尽量短一点。

编辑：我认为如果首先把它们全部隐藏起来，效果会更好

  $('#ThumbLinks a').click(function(e) {
    // first we hide them all (for a nicer effect)
    $("div.thumbs").hide();
    if ($(this).attr("id") == "all")
    // if the ThumbLink's id is 'all' we fade in all the divs 
      $(".thumbs").fadeIn("slow");
    else
    // if not, we fade in just the correct one 
      $("#" + $(this).attr("id") + "_info").fadeIn("slow");
  });

​

$(document).ready(function() {
  $("div.thumbs:gt(0)").hide(); // hide all div except for the first one

  $('#ThumbLinks a').click(function(e) {
    // fisrt we hide them all (for a nicer effect)
    $("div.thumbs").hide();
    if ($(this).attr("id") == "all")
    // if the ThumbLink's id is 'all' fade in all the divs 
      $(".thumbs").fadeIn("slow");
    else
    // if not, we fade in just the correct one 
      $("#" + $(this).attr("id") + "_info").fadeIn("slow");
  });
});

.thumbs {
  color: white;
}
.gd_thumbs {
  display: none;
}
.art_thumbs {
  display: none;
}
.icon-image {
  width: 100%;
  height: auto;
  opacity: 1;
}
.flex_one {
  width: 28%;
  float: left;
  position: relative;
  background-color: #000;
  border: solid 2px rgb(0, 81, 88);
  overflow: hidden;
  margin-left: 4%;
  margin-top: 4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectiondivider">
  <div id="ThumbLinks">
    <a href="#" name="thumbs" id="all">ALL</a> 
    <a href="#" name="thumbs" id="art">ART</a>
    <br />
    <a href="#" name="thumbs" id="gd">GD</a> 
  </div>
</div>

<div class="thumb_container">
  <div class="thumbs" id="gd_info">
    <div class="flex_one">
      I'm the GD div
      <img class="icon-image" src="gd.jpg" />
    </div>
  </div>
  <div class="thumbs" id="art_info">
    <div class="flex_one">
      I'm the ART div
      <img class="icon-image" src="art.jpg" />
    </div>
  </div>
</div>

​