Question

我想用class =＆＃34; form-group＆＃34;隐藏div。如果里面的标签没有任何要显示的内容这是我的HTML代码：

echo'<div class="form-group">';
                        echo'<label for="exampleInputFile" class="tbh">'.$query2['req_1'].'</label>';
                        echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
                        echo'</div>';

我的javascript在这里：

<script type="text/javascript">
                        if($('label.tbh:empty')){
                            $('div.form-group').hide();
                        }
                        </script>

还有其他办法吗？在我的代码中它似乎不起作用。在此先感谢您的帮助。

Answer 1

使用.text()是一个更安全的选择。如果标签为空，.text()将返回一个空字符串，否定它将给出true。请参阅以下示例的交互式代码段。我将相关代码放在按钮单击处理程序中，以证明它在您单击它之后可以正常工作。

$('button').click(function () {
  if (!$('.tbh').text()){
    $('.form-group').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
<label for="exampleInputFile" class="tbh"></label>
<input type="file" name="my_image" accept="image/*" id="exampleInputFile"></div>

<button>Click to hide</button>

Answer 2

试试这个：

if($('label.tbh').html() == ""){
     $('div.form-group').hide();
  }

Answer 3

你可以这样做：

/* Be sure that ur dom is loaded */    
$( document ).ready(function() {
    /* Checking that the label is empty */
    if($("label").html().length == 0) {
        $('div.form-group').hide();   
    }
});

U也可以使用size（）而不是length;）

Answer 4

如果您使用的是jQuery，可以这样做：

$("div.form-group label.tbh:empty").parent().hide();

这是document.ready内部回调的正确方法：

$(document).ready(function(){
    $("div.form-group label.tbh:empty").parent().hide()
});

要包含jQuery，请添加

echo '<script src="https://code.jquery.com/jquery-3.1.1.js"></script>';

到你的剧本的头部。

但似乎你在后端使用PHP或类似的东西？如果是这样，您可以在服务器端代码上执行此操作：

if(strlen($query2['req_1']) == 0)
{
    echo'<div class="form-group">';
    echo'<label for="exampleInputFile" class="tbh">'.$query2["req_1"].'</label>';
    echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
    echo'</div>';
}

在这种情况下，您不会将不需要的数据传输到客户端。

Javascript：如果Label内部为空，如何隐藏div

4 个答案: