當另一個人擁有內容時，如何隱藏div類

如果在標題div中有內容，我正面臨swiper 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分頁隱藏

來源

2017-03-24 H.Wadewitz

我不明白究竟要隱藏 –

嗨什麼，我想隱藏

當它有內容 –

：

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'); 
    } 
});

來源

2017-03-24 18:42:53 BarthesSimpson

如何我一定要實現.each（）？當我把你的代碼隱藏所有的標題類 –

查看更新以回答 – BarthesSimpson

您需要驗證'div.caption'裏面是否有html，或者只是將一個類指定給有內容的div。例如：

<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
     <img src="http://placekitten.com/500/300"> 
     <div class="caption captionContent">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 captionContent">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>

然後使用jQuery這樣的：

//some event { 
    if($('.caption').hasClass('.captionContent')){ 
     $(this).hide(); 
    } 
}

我希望這能解決您的問題。

來源

2017-03-24 18:58:01

試試這個：編輯您的js文件到

var swiper = new Swiper('.swiper-container', { 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     pagination: '.swiper-pagination', 
     paginationType: 'fraction' 
    }); 

    swiper.on('slideChangeStart', function() { 
    flag=$('.swiper-slide-active>.caption').html(); 
    if(flag!= "") { 
    $('.swiper-pagination').css('visibility', 'hidden'); 
} else {  
    $('.swiper-pagination').css('visibility', 'initial'); 
} 
});

來源

2017-03-24 19:36:06

謝謝你們，這個使工作。此外，我需要初始化後更新滑塊

var swiper = new Swiper('.swiper-container', { 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    pagination: '.swiper-pagination', 
    paginationType: 'fraction', 
    'onInit': function() { 
    flag = $('.swiper-slide-active>.caption').html(); 
    if (flag != "") { 
     $('.swiper-pagination').css('visibility', 'hidden'); 
    } else { 
     $('.swiper-pagination').css('visibility', 'initial'); 
    } 
    } 
}); 

swiper.on('slideChangeStart', function() { 
    flag = $('.swiper-slide-active>.caption').html(); 
    if (flag != "") { 
    $('.swiper-pagination').css('visibility', 'hidden'); 
    } else { 
    $('.swiper-pagination').css('visibility', 'initial'); 
    } 
});

來源

2017-03-27 10:30:47

當另一個人擁有內容時，如何隱藏div類

回答

相關問題