Question

我正在使用Owl Carousel插件： https://github.com/gijsroge/OwlCarousel2-Thumbs

它将图像插入为导航缩略图。

我试图找出整个.owl-thumbs元素的高度。在控制台中可以做到这一点。但是我的scripts.js中的同一代码会返回“ null”作为高度。

这是我的代码：

jQuery( document ).ready(function($) {
console.log($('.owl-thumbs').outerHeight());
});

..我也尝试使用另一个选择器，例如$('.owl-carousel.single owl-loaded .owl-thumbs')等。

这是轮播的标记：

<div class="carousel single">
    <div class="owl-carousel single owl-loaded owl-drag" data-slider-id="1">

<div class="owl-stage-outer">
 <div class="owl-stage" style="transform: translate3d(-6985px, 0px, 
 0px); transition: all 0.25s ease 0s; width: 8255px;">
 <div class="owl-item video-item" style="width: 635px;"><a href="/wp- 
 content/uploads/2016/02/thumbexample-4.jpg" data-thumb="<img 
 src=&quot;/wp-content/uploads/2016/02/thumbexample-4.jpg&quot;/>" 
 class="single-slide" data-featherlight="image">
 <img src="/wp-content/uploads/2016/02/thumbexample-4.jpg"></a>
 </div>
</div>

<div class="owl-nav"><button type="button" role="presentation" 
 class="owl-prev"><span aria-label="Previous">‹</span></button><button 
 type="button" role="presentation" class="owl-next"><span aria- label="Next">›</span></button></div><div class="owl-dots"><button 
 role="button" class="owl-dot"><span></span></button>
</div>

<div class="owl-thumbs"><button class="owl-thumb-item"><img src="/wp- content/uploads/2016/02/thumbexample-4.jpg"></button>
</div>

</div>
</div>
</div>

Answer 1

在插件初始化后获取值

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('initialized.owl.carousel', function(event) {
    $('.owl-thumbs').outerHeight();
})

Answer 2

我刚刚找到了解决方法：

if($.fn.owlCarousel.Constructor.Plugins.Thumbs) {
    thumsHeight = $('.owl-thumbs').outerHeight();
}

...工作：）

猫头鹰旋转木马拇指高度undefined

2 个答案: