1

我在这个问题上挣扎了几个小时。我正在使用 Bootstrap3 轮播；我想做的是在我的.toBottom div 上应用带有 JQuery 的 CSS 规则（注意：这个问题不能用纯 CSS 解决方案解决，因为我要分配的值需要用 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“顶部”值。


3）我注意到，默认情况下，也有.active类的.item div

display: block;

和所有剩余的“非活动” .item div

display: none;


事实是，如果我在 .toBottom 为.active时启动 JQuery 脚本，CSS 顶部值会正常变化，但如果我在它不是 .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"



编辑2：

终于解决了。问题是我无法计算$(".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 的想法。

4

1 回答 1

0

如果没有显示 somthin，则无法计算高度，因为高度将为 0。

您可以尝试等待 .activ 类，然后计算。

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", "");
    }
}
于 2015-11-24T11:50:16.757 回答