[英]Javascript: How to hide div if Label inside is empty
I would like to hide the div with the class= "form-group" if the label inside doesn't have anything to display here is my html code: 如果其中的标签没有要显示的内容,我想用class =“ form-group”隐藏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>';
And my javascript is here: 我的javascript在这里:
<script type="text/javascript">
if($('label.tbh:empty')){
$('div.form-group').hide();
}
</script>
Is there any other way to do that? 还有其他方法吗? In my code it doesn't seem to work.
在我的代码中,它似乎不起作用。 Thanks in advance for the help.
先谢谢您的帮助。
Using .text()
is a safer option. 使用
.text()
是更安全的选择。 If the label is empty, .text()
will return an empty string and negating it will give true
. 如果标签为空,则
.text()
将返回一个空字符串,并将其取反将得到true
。 Refer to the interactive snippet with example below. 请参考以下示例的交互式代码段。 I placed the relevant code in a button click handler to prove that it works after you click on it.
我将相关代码放在按钮单击处理程序中,以证明单击它后它可以工作。
$('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>
Try this: 尝试这个:
if($('label.tbh').html() == ""){
$('div.form-group').hide();
}
You can do it like this: 您可以这样做:
/* Be sure that your dom is loaded */
$( document ).ready(function() {
/* Checking that the label is empty */
if($("label").html().length == 0) {
$('div.form-group').hide();
}
});
You can also use size()
instead of length
. 您也可以使用
size()
代替length
。
If you are using jQuery, you may do it by that way: 如果您使用的是jQuery,则可以通过以下方式实现:
$("div.form-group label.tbh:empty").parent().hide();
It's a right way to do in inside document.ready
callback: 这是在
document.ready
回调内部执行的正确方法:
$(document).ready(function(){
$("div.form-group label.tbh:empty").parent().hide()
});
To include jQuery, add 要包括jQuery,请添加
echo '<script src="https://code.jquery.com/jquery-3.1.1.js"></script>';
to head of your script. 脚本的开头。
But it seems like you are using PHP or something like at your backend side? 但是似乎您正在使用PHP或在后端使用类似工具? If so, you may do it on server-side code like this:
如果是这样,您可以在服务器端代码上执行以下操作:
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>';
}
in this case you would not transfer unneeded data to the client. 在这种情况下,您不会将不需要的数据传输到客户端。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.