JQuery 无法处理 Bootstrap 轮播未显示图像

JQuery not working on Bootstrap Carousel not displayed images

我在这个问题上苦苦挣扎了几个小时。我正在使用 Bootstrap3 轮播;我想做的是用 JQuery 应用 CSS 规则(注意:问题无法用 CSS-only 解决方案解决,因为我想分配的值需要是在我的 .toBottom div.

上用 JQuery) 计算 1) 这是轮播的基本 HTML 结构:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img />
    </div>

    <div class="item">
      <img />
    </div>

    <div class="item toBottom">
      <img />
    </div>

    <div class="item">
      <img />
    </div>
  </div>

</div>


2) JQuery 脚本基本上为 .toBottom 元素计算新的 CSS "top" 值。


3)我注意到,默认情况下, .item div 也有 .active class

display: block;

和所有剩余的 "non-active" .item div 有

display: none;


事实是,如果我在 .toBottom 为 .active 时启动 JQuery 脚本,CSS 最高值会正常变化,BUT 如果我在它不是 .active 时启动它(或者它是 display:none), 它的 CSS 根本不会改变
我该如何解决这个问题?即使 .toBottom div 是 display:none,我也想应用该规则。
提前谢谢你。

(如果我不太清楚,我很抱歉,我尽量简化了情况)


编辑:

这是脚本:

var carouselHeight = $(".carousel-inner").outerHeight();
var newTop = carouselHeight - $(".item.toBottom > img").height();
if(newTop < 0)
  $(".item.toBottom > img").css("top", newTop);
else
  $(".item.toBottom > img").css("top", "");

请注意,如果 $(".item.toBottom").css("display") == "block"

,此代码有效



EDIT2:

终于解决了。问题是我无法计算 $(".item.toBottom > img").height(),因为 .item.toBottom 没有显示。这是最终脚本:

  var carouselHeight = $(".carousel-inner").outerHeight();
  $(".item.toBottom").css('display','block');
  var newTop = carouselHeight - $(".item.toBottom > img").height();
  $(".item.toBottom").css('display','');
  if(newTop < 0)
    $(".item.toBottom > img").css("top", newTop);
  else
    $(".item.toBottom > img").css("top", '');

特别感谢@Zorken17 的想法。

你不能计算未显示的东西的高度,因为高度将为 0。

你可以尝试等待class.activity后再计算。

if( $('.item.toBottom').hasClass('active')) {
    var carouselHeight = $(".carousel-inner").outerHeight();
    var newTop = carouselHeight - $(".item.toBottom > img").height();
    if(newTop < 0) {
        $(".item.toBottom > img").css("top", newTop);
    } else {
        $(".item.toBottom > img").css("top", "");
    }
}