我在这个问题上挣扎了好几个小时。我正在使用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的想法。
答案 0 :(得分: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", "");
}
}