Question

我在这个问题上挣扎了好几个小时。我正在使用Bootstrap3 Carousel;我想要做的是使用JQuery应用CSS规则（注意：在我的 .toBottom <上，因为我想要分配的值需要使用JQuery计算，因此无法通过CSS解决方案解决问题） / strong> div。

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 类

display: block;

所有剩余的“非活跃” .item div都有

display: none;

事实是，如果我在.toBottom .active 时启动JQuery脚本，则CSS顶部值会正常更改， BUT 如果我启动时它不是.active（或者它是显示：无），它的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 ，因此我无法计算$(".item.toBottom > img").height()。这是最后的剧本：

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的想法。

Answer 1

如果未显示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", "");
    }
}

JQuery没有使用Bootstrap Carousel没有显示图像

1 个答案: