如果div为空，则隐藏按钮
[英]Hide button if div empty
问题描述
我一直试图在div为空而没有运气时隐藏一个按钮，为什么div为空？ 因为我通过后端wordpress在其中插入了一个简码。
这是代码：
<head>
<script src="jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() { if ( $(".whatever").parents("#content").length == 1 ){
$('input#bt23').show();
}else { $('input#bt23').hide();
});
</script>
</head>
<body>
<div id="content">
///empty
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" /></body>
就是这样，如果没有其他div内部人员#Content，有什么想法，尝试使按钮消失。
我只是注意到，也许只是div不为空，看起来好像是空的，但我认为已经充满了空间。
因此，与其比较空白和填充，不如比较文本和其中的特定div填充？
像这样：
<div class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">
3 个解决方案
解决方案1
1 已采纳 2015-04-02 22:49:04
检查text或html ：
没有内容
$(document).ready(function() { if ( $("#content").text() ){ $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"></div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
有内容
$(document).ready(function() { if ( $("#content").text() ){ $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content">Content here</div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
仅带空格
$(document).ready(function() { if ( $("#content").text().trim() ){ $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> </div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
检查特定的div
我们在这里可以有点创意。 假设我们正在内容中寻找.video_wrapper div。 我们可以简单地查询它，如果找不到，返回的长度将为零，从而导致输入被隐藏。
$(document).ready(function() { console.log($("#content .video-wrapper")); if ($("#content .video-wrapper").length > 0) { $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> <div class="content"> <div style="whatever"> <div class="video-wrapper"></div> </div> </div> </div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
检查特定的div-纯JS
function windowReady() { if (document.querySelector("#content .video-wrapper")) { document.getElementById('bt23').style.display = "block"; } else { document.getElementById('bt23').style.display = "none"; } }; window.onload = windowReady;
<div id="content"> <div class="content"> <div style="whatever"> <div class="video-wrapper"></div> </div> </div> </div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
解决方案2
0 2015-04-02 22:48:07
您试图完成这样的事情？
$(document).ready(function() {
if ( $("#content").html() == '' )
{
$('input#bt23').hide();
}
else {
$('input#bt23').show();
}
});
解决方案3
0 2015-04-02 22:48:57
首先，应该使用PHP在服务器端进行处理，您应该检查是否有任何争执。 未能做到这一点，有一个jQuery的解决方案。
if($.trim($("#content").text()) == ""){$("#bt23").hide();}
如果 ul 为空，则隐藏 div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.