jquery .load() 调用然后 css 不工作

Question

我使用轮播创建了一个缩略图图库。每个画廊对应一个城市，加载函数用于将画廊替换为不同的城市。

例如：

<div class="replace">
    <div class="prev_box"><div class="prev"><p> < </p></div></div>
    <div id="thumbs">
        <div class="pic"><img src="NYC/img1.jpg" alt="">  </div>
        <div class="pic"><img src="NYC/img2.jpg" alt=""></div>
        <div class="pic"><img src="NYC/img3.jpg" alt=""></div>
    </div>
    <div class="next_box"><div class="next"><p> > </p></div></div>
</div>

然后在底部实现轮播和加载功能，以在必要时替换图库。

<script>
    $(document).ready(function() {
        $( ".NYC" ).click(function() {
            $(".replace").load( "Galleries.html #NYC" );
            $(".prevgallery").removeClass('active');
            $(".NYC").addClass('active');
        });
        $( ".LA" ).click(function() {
            $(".replace").load( "Galleries.html #LA" );
            $(".prevgallery").removeClass('active');
            $(".LA").addClass('active');
        });
    });
</script>

简单的轮播通过“slick”实现如下：

<script type="text/javascript">
    $(document).ready(function(){
        $('#thumbs').slick({
            infinite: false,
            slidesToScroll: 3,
            slidesToShow: 7,
            prevArrow: $('.prev_box'),
            nextArrow: $('.next_box')
        });
    });
</script>

为了让图片保持一定大小，CSS如下：

#thumbs {
    display: inline-block;
    height: 90px;
    width: 670px;
    border: 1px solid red;
}

#thumbs div .pic {
    height: 80px;
    margin: 5px 0px 5px 0px;
    border: 1px solid green;
}

#thumbs div .pic img {
    height: 100%;
    width: auto;
    cursor: pointer;
} 

CSS 代码适用于原始城市，例如纽约市。但奇怪的是，当另一个城市如LA被加载到html文件中替换“替换”div时，CSS文件似乎对新的div没有影响。

以下代码在 Galleries.html 中找到

<div class="replace" id="LA">
    <div class="prev_box"><div class="prev"><p> < </p></div></div>
    <div id="thumbs">
        <div class="pic"><img src="LA/img1.jpg" alt=""></div>
        <div class="pic"><img src="LA/img2.jpg" alt=""></div>
        <div class="pic"><img src="LA/img3.jpg" alt=""></div>
    </div>
</div>

Answer 1

尝试将您的 CSS 规则从 div .pic 更改为 div.pic

#thumbs div.pic { 
  /* .... */
}

和

#thumbs div.pic img { 
  /* .... */
}