0

我有一个图像滑块，div 的左半部分显示图像，右半部分显示灰色背景的标题。由于我在 UI 中使用 Bootstrap，图像会随着寡妇的变化而改变尺寸，所以我使用 jQuery 来保持正确的标题大小。这在 localhost 上可以正常工作，但在我的暂存环境中却不行。

jQuery：

jQuery(document).ready(function($) {
 //resizes carousel right side as window changes
 function size_carousel(){
    var height = $('.carousel-inner .item img:visible').height();
    console.log($('.carousel-inner .item img:visible').height());
    $('.carousel-caption').each(function(){
        $(this).height(height);
    });
 }
 $(window).resize(function() {
    size_carousel();
 });
 $('#myCarousel').ready(function(){
    size_carousel();
 });
});

HTML 摘录：

<div id="myCarousel" class="carousel slide">
         <ol class="carousel-indicators">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                 <li data-target="#myCarousel" data-slide-to="1"></li>
                 <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
        <div class="carousel-inner">
          <div class="item active">
                <img src="<?php bloginfo('template_directory');?>/images/test/demo1.jpeg" class="span6"/>
                <div class="carousel-caption span6">
                        <h3 class="cat">Tech News</h3>
                        <h2 class="title">Article Title</h2>
                        <p class="dek well well-small">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.  Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div> <!-- /caption -->
          </div><!-- /item -->
    </div>

刷新时，在localhost控制台中显示正确的值（取决于窗口大小，它在 2-300 之间变化），而暂存环境始终返回30，而不管窗口大小。当您调整窗口大小时，它会返回正确的值并且标题会正确调整，因此唯一的问题是初始页面加载。

localhost是 MAMP 和 staging 是一个 MediaTemple gs 服务器，都具有相同的 WordPress 安装和 jQuery 版本，所以我很难隔离可能导致它表现不同的原因。

您可以在这里看到它的实际效果。

4

1 回答 1

0

改变这个：

$(window).resize(function() {
    size_carousel();
 });
 $('#myCarousel').ready(function(){  //ready event is only for document!
    size_carousel();
 });

对此：

$(window).on('resize load',function() {
    size_carousel();
 });
于 2013-06-21T12:33:44.357 回答