Question

我已经看了大约一个星期左右现在尝试各种技术，但到目前为止还没有运气。

我使用基于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回复帖子中的数据，但是Tab 2为空，我想隐藏上面的Tab 2的li。

有人可以帮忙吗？

提前谢谢

Answer 1

我必须修复上面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();
        }
    });
});

Answer 2

而不是使用the_field（其中打印信息），看看是否有一个返回<{em>信息的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调用后，您可以通过运行
来判断div是否为空
if(jQuery('.view2').html()==='') { jQuery('#view2').hide(); }

但是，请记住，如果您的DOM有多个具有view2类的元素，则html（）方法将生成匹配的第一个元素的内容。

Answer 3

您想知道<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);
});

如果div为空，请隐藏li？

3 个答案: