如果div爲空，就隱藏一個li？

-1

我環顧四周左右，現在嘗試各種技術，但迄今沒有運氣。如果div爲空，就隱藏一個li？

我正在使用基於JavaScript的選項卡來標出頁面上的內容。內容是從Wordpress自定義字段動態生成的。如果div沒有內容顯示在HTML中，我希望相應的選項卡不出現。這可能嗎？

我的代碼是這樣：

<ul class="tabs"> 
<li class="tab1"><a href="#view1">Tab 1</a></li> 
<li class="tab2"><a href="#view2">Tab 2</a></li> 
<li class="tab3"><a href="#view3">Tab 3</a></li> 

<div class="tabcontents"> 

<div id="view1"> 

<div class="noScreen"> 
<h2>Tab 1</h2> 
</div> 

<div class="view1"> 
<?php the_field('tab1'); ?> 
</div> 

</div> 
<!--end Tab1--> 

<div id="view2"> 

<div class="noScreen"> 
<h2>Tab 2</h2> 
</div> 

<div class="view2"> 
<?php the_field('tab2'); ?> 
</div> 

</div> 
<!--end Tab2--> 

<div id="view3"> 

<div class="noScreen"> 
<h2>Tab 3</h2> 
</div> 

<div class="view3"> 
<?php the_field('tab3'); ?> 
</div> 

</div> 
<!--end Tab1--> 

</div> 
<!--end tabcontents-->

所以，如果TAB1和TAB3響應回從職位數據，但表二是空的，我想隱藏了上述標籤2華里。

任何人都可以幫忙嗎？

預先感謝您

來源

2014-05-01 svsdnb

看來，PHP函數導致問題出現，即使現在用的是get_field檢查顯示，前值。 – svsdnb

我不知道如何去解決，但你可以標記這個問題。謝謝。 – svsdnb

我不得不修復從上面你的HTML丟失了某些標記和報價，但這似乎這樣的伎倆。

的jsfiddle：

http://jsfiddle.net/Q27K6/

$(function(){ 
    $('div.tabcontents > div').each(function(index){ 
     var innerView = $(this).find('div[class^="view"]'); 
     var innerHtml = $(innerView).html(); 
     if(innerHtml.trim() == ''){ 
      $(this).hide(); 
      $('ul.tabs').find('li').eq(index).hide(); 
     } 
    }); 
});

來源

2014-05-01 19:18:12 sbonkosky

抱歉失蹤的引號。我在星期五的一天結束時寫了這篇文章。當我將這個JS添加到我的網站時，似乎沒有什麼奇怪的事情發生。 – svsdnb

@svsdnb頁面加載後，您是否看到任何錯誤或任何內容？如果你查看你的網頁的源代碼，你的HTML是否符合你的問題？ – sbonkosky

我應該把這個JS放在頁面的底部嗎？也許它在php輸出HTML之前運行它，這就是爲什麼它顯示出來，因爲那裏有php函數調用。？ – svsdnb

，而不是使用the_field（其中打印資訊）看看那裏有一個get_field功能回報信息。這樣你可以預先決定div是否爲空。

$tab2content=get_field('tab2'); 
if(!empty($tab2content)) { 
    echo '<div id="view2">'; 
    echo '<div class="noScreen"><h2>Tab 2</h2></div>'; 
    echo '<div class="view2">'.$tab2content.'</div>'; 
    echo '</div>'; 
}

如果不工作，你的內容加載任何Ajax調用解決後，你可以告訴我們，如果格是空的運行

if(jQuery('.view2').html()==='') { 
    jQuery('#view2').hide(); 
}

但是，請記住，如果您的DOM有多個view2類的元素，html（）方法將生成第一個匹配的內容。

來源

2014-05-01 19:18:55 amenadiel

不幸的是，get_field似乎沒有解決任何數據。第二個因爲某種原因似乎沒有工作。 – svsdnb

你可以嘗試在控制檯上輸入'''''jQuery（'。view2'）。html（）''' – amenadiel

在控制檯中鍵入沒有返回任何值 – svsdnb

您想知道<div class='view2'>的內容是否爲空？ div id='view2'>永遠不會是空的，所以我會認爲它是前者。

那麼，是否爲空取決於是否有任何從php函數the_field('tab2')返回的東西，對不對？

因此，解決問題的一種方法是在服務器上執行該操作，方法是檢查函數the_field('tab2')（或其他）是否爲空。雖然這在php中稍微有些複雜。

或者在javascript：

$().ready(function() { 

    var hideTab = function(index) { 
    var $view = $('.view' + index) 
     , $tab = $('.tab' + index); 
    if($.trim($view.html()).length === 0) { 
     $tab.hide(); 
    } 
    } 

    // Stick this in a loop to make it neater 
    hideTab(1); 
    hideTab(2); 
    hideTab(3); 
});

來源

2014-05-01 19:23:20

是的。對不起，沒有更直接的。我期待在php返回後看div類的視圖是否爲空。 – svsdnb

如果div爲空，就隱藏一個li？

回答

相關問題