jquery中的隐藏/显示问题_Jquery

jquery中的隐藏/显示问题

jquery

jquery中的隐藏/显示问题,jquery,Jquery,我在搞一个画廊。找到了很酷的现成解决方案，但我想做一些修改，我被卡住了我希望它如何工作：当你点击图像时，它会改变右边的图像，使其中一个隐藏的div可见问题是，我必须在页面加载时隐藏所有div，并在单击图像时仅显示此隐藏div中的特定div <script type="text/javascript"> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(

我在搞一个画廊。找到了很酷的现成解决方案，但我想做一些修改，我被卡住了

我希望它如何工作：当你点击图像时，它会改变右边的图像，使其中一个隐藏的div可见

问题是，我必须在页面加载时隐藏所有div，并在单击图像时仅显示此隐藏div中的特定div

    <script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'});
 $(this).find('img').addClass("hover").stop()
  .animate({
   marginTop: '-110px',
   marginLeft: '-110px', 
   top: '50%', 
   left: '50%', 
   width: '200px',
   height: '200px',
   padding: '5px'
  }, 200);

 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).find('img').removeClass("hover").stop()
  .animate({
   marginTop: '0', 
   marginLeft: '0',
   top: '0', 
   left: '0', 
   width: '150px',
   height: '150px',
   padding: '10px'
  }, 400);
});

//Swap Image on Click

 $("ul.thumb li a").click(function() {

  var mainImage = $(this).attr("href"); //Find Image Name
                $("#main_view img").attr({ src: mainImage });

                return false;
 });


});
</script>

<script type="text/javascript">
$(document).ready(function() {
//      $('#slickbox').hide();
      $('a.slick-toggle').click(function() {

        var dataID = $(this).attr("data-id");
        $('#slickbox').hide();
        $("#slickbox.div[data-id=" + dataID + "].slickbox").show('slow');
        return false;
    });
});
</script>

</head><body>
<div class="container">

<ul class="thumb">
 <li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="1"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
 <li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="2"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
 <li><a href="./index_pliki/max3.jpg" data-id="3"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
 <li><a href="./index_pliki/max4.jpg" data-id="4"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
</ul>

<div id="main_view">

        <a href="index.htm" id="slick-up"><img src="index_pliki/max1.jpg" alt=""/></a>
 <small style="float: right; color: rgb(153, 153, 153);">
                       </small>
</div>

<div id="wiecej">       

<div id="slickbox">

<a id="someID" class="slick-toggle" data-id="1" href="#">Show/Hide</a>
<div id="someOtherID" class="slickbox" data-id="1" style="display: none;">
  1
</div>

<a id="someID" class="slick-toggle" data-id="2" href="#">Show/Hide</a>
<div id="someOtherID" class="slickbox" data-id="2" style="display: none;">
  2
</div>

</div>


$（文档）.ready（函数（）{
//放大缩略图预览
$（“ul.thumb li”）.hover（函数（）{
$（this.css（{'z-index'：'10'）；
$（this.find（'img'）.addClass（“hover”）.stop（）
.制作动画({
marginTop:“-110px”，
marginLeft:“-110px”，
前50%，
左：50%，
宽度：“200px”，
高度：“200px”，
填充：“5px”
}, 200);
}，函数（）{
$（this.css（{'z-index'：'0'）；
$（this.find（'img'）.removeClass（“悬停”）.stop（）
.制作动画({
marginTop:'0'，
marginLeft:'0'，
顶部：“0”，
左：“0”，
宽度：“150px”，
高度：'150px'，
填充：“10px”
}, 400);
});
//单击时交换图像
$（“ul.a”）。单击（函数（）{
var mainImage=$（this）.attr（“href”）；//查找图像名称
$（“#主视图img”）.attr（{src:mainImage}）；
返回false；
});
});
$（文档）.ready（函数（）{
//$（“#slickbox”）.hide（）；
$（'a.slick-toggle'）。单击（函数（）{
var dataID=$（this.attr（“数据id”）；
$（“#slickbox”）.hide（）；
$（“#slickbox.div[data id=“+dataID+”].slickbox”）.show（'slow'）；
返回false；
});
});






1.
2.

无法使隐藏元素中的内容可见：

$('#slickbox').hide();

这将隐藏id为

slickbox

的div及其所有子项。按如下方式更改您的单击处理程序：

$(document).ready(function() {
  $('a.slick-toggle').click(function() {
    var dataID = $(this).attr("data-id");
    $('#slickbox div.slickbox').hide();
    $("#slickbox div[data-id=" + dataID + "].slickbox").show('slow');
    return false;
  });
});

请注意

#flickbox div

之间缺少的点欢迎访问SO，请访问