jquery - 当另一个有内容时，如何隐藏一个 div 类

Question

我遇到了滑动条 slider 和分页的问题，如果标题 div 中有内容，我想隐藏它。

我创建了一个 http://jsfiddle.net/1sta65uv/2/并对此进行了一些研究，但到目前为止我还没有办法。我知道我需要一个 if 语句，但我如何获得与长度的连接？

也许你能帮我一点忙？会很棒

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption">Image caption</div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption"></div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption">Image caption</div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption"></div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

编辑:

我想在有内容时隐藏分页。问题 - 它是针对动态页面的。

这意味着

幻灯片 1 有分页
幻灯片 2 分页已隐藏
幻灯片 3 有分页
幻灯片 4 分页隐藏

Answer 1

每次滑动你都可以触发:

if($('.swiper-slide-active').find('.caption').html() != '') {
    $('.swiper-pagination').css('visibility', 'hidden');
} else {
    $('.swiper-pagination').css('visibility', 'initial');
}

编辑 - 我以为您想在标题有内容的情况下隐藏分页，但看起来您实际上只想隐藏所有标题。如果是这种情况，您可以在初始化刷卡器后执行此操作:

$('.caption').css('visibility', 'hidden');

甚至:

$('.caption').html('');

更新 - 如果您只想隐藏有内容的字幕，您可以:

$('.caption').each(function() {
    if ($(this).html() == '') {
        $(this).css('visibility', 'hidden');
    }
});