Question

我正在开设某种画廊。找到了很酷的解决方案，但我想做一些修改，而且我被卡住了。

http://www.rareclips.ayz.pl/test/

我希望如何工作：当您单击并成像时，它应该更改右侧的图像，并使其中一个隐藏的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>

Answer 1

你不能在隐藏元素中看到东西：

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

这会隐藏div 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;
  });
});

请注意#slickbox div

之间缺少的点

在jquery中隐藏/显示的问题

1 个答案: