Question

我有许多幻灯片显示：none。当您单击左侧的缩略图时，相应的幻灯片应该淡入。这适用于第一次单击，但在随后的单击时，图像不会加载。我的项目位于：http://newsinteractive.post-gazette.com/bridges/monongahela。

我做错了什么？

jquery的：

    $('.thumb').click(function(){
                var thisID = $(this).attr('id');
                var str = thisID.split("-");
                var thisbridge = str[0];

                // SLIDESHOW COMPONENT

        $.each($(".slideshowWrapper"), function(i, slideshowWrapper){ 

            if ($(slideshowWrapper).attr('id') == 'ss' + thisbridge) {
                //$(this).load( function() { $(this).fadeIn(300); });
                $(this).fadeIn(300);
            } else {
                $(this).fadeOut('fast');
            }
           ...

         });
});

HTML：（一个缩略图的例子）

<div class="thumb" id="fortpitt-Thumb" >
            <img src="img/fortpitt/thumbnail.jpg" />
            <div class="thumbtitle">Fort Pitt</div>
        </div>

（一个幻灯片的例子）

            <!-- start fortpitt slideshow-->
            <div class="slideshowWrapper" id="ssfortpitt">
            <div class="slideshow" style="line-height:15px;"> 
                <div class="slideshowTableOfContents"><div class="tableOfContentsNav leftNav"><</div><div class="tableOfContentsNav rightNav">></div><div style="clear:both"></div></div>
                <div class="slideshowBox">
                    <div class="slideshowArrowBoxWrapper leftArrow">
                        <div class="slideshowArrowBox">
                            <i class="fa fa-arrow-circle-o-left"></i>
                        </div>
                    </div>

                    <div class="slideshowRunway">

                        <div class="slideshowImage">
                            <img src="img/fortpitt/frommtwashington.jpg" credit="Library of Congress" caption="This view from Mt. Washington about 1905 shows the first Point Bridge, built in 1876-77. See the <a href='http://www.post-gazette.com/news/transportation/2014/10/12/Fort-Pitt-Bridge-1' target='_blank'>Fort Pitt Bridge story</a>." />
                            <div class="credit">Library of Congress</div>
                        </div>

                        <div class="slideshowImage">
                            <img src="img/fortpitt/harpers.jpg" credit="Harper's Weekly" caption="The first Point Bridge is in the foreground of the 1892 engraving ''Pittsburg, Pennsylvania from Grand View Avenue'' by Charles Graham. See the <a href='http://www.post-gazette.com/news/transportation/2014/10/12/Fort-Pitt-Bridge-1' target='_blank'>Fort Pitt Bridge story</a>." />
                            <div class="credit">Harper's Weekly</div>
                        </div>

                        ...

                        <div style="clear:both;"></div>



                    </div>

                    <div class="slideshowArrowBoxWrapper rightArrow">
                        <div class="slideshowArrowBox">
                            <i class="fa fa-arrow-circle-o-right"></i>
                        </div>
                    </div>
                </div>
                <div class="caption">Caption</div>
                <div style="clear:both;"></div>
            </div>
            <div style="clear:both;"></div>
        </div> <!-- end slideshow-->

的CSS：

.slideshowWrapper
{

position:relative;
padding:20px 0px;
display: none;
}

.slideshow
{
/*width:1000px;*/
margin:auto;

}

图像加载第一个fadein，但不加载后续的fadein

0 个答案: