我正在使用 div 标签制作一个盒子。用户输入将从提示框中获取，并将显示在固定尺寸的 div 标记中。如果没有给出任何输入，则根本不会显示该 div。
但是，当我没有在提示框中输入任何内容时，仍然会显示空的 div，即使我指定了一个 else 条件，在该条件下它的可见性设置为隐藏。
我认为程序没有进入 if 语句的 else 条件来将 div 的可见性设置为隐藏。
JavaScript:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> css//the js file..
var person1;
function getdata()
{
person1=prompt("Please enter your data 1","Sample 1",max="5");
}
function displayResult()
{
var table1=document.getElementById("table1");
table1.innerHTML=person1;
if(person1.value!="")
{
$("#table1").css({"border-color": "#000000",
"border-width":"1px",
"border-style":"solid",
"visibility" : "visible",
//"position" :"fixed",
//"resize":"both",
"overflow":"auto",
"width":"60px",
//"maxlength":"10",
"height": "80px",
"top": "30px",
"left" : "80px"});
}
else
{
alert("hello");
("#table1").css({"border-color": "#000000",
"border-width":"0px",
"border-style":"solid",
"visibility" : 'hidden',
//"position" :"fixed",
"resize":"both",
"overflow":"auto",
"width" :"60px",
"height" : "80px",
"top": "30px",
"left" : "80px"});
}
}
HTML:
<body>
<form>
<div id="table1" width="1%" height="10%" style="visibility:hidden"></div>
</form>
<button type="button" id="button" onclick="getdata()">Insert data</button>
</body>
这里是 jsfiddle
最佳答案
这是对您的代码的修改，可以正确处理空输入。您为“不可见”div 指定了宽度和高度，因此在这种情况下存在“不可见空间”。根据您的需要修改 CSS 定义。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="PATH-TO-jQuery"></script>
<script type="text/javascript">
$(function() {
$("#table1").css({"visibility":"hidden", "width":"1%", "heigth":"10%"});
$("#testButton").click(function() {
displayResult();
});
});
var person1;
function getdata()
{
person1=prompt("Please enter your data 1","Sample 1",max="5");
}
function displayResult()
{
$("#table1").text(person1);
if(person1.length)
{
$("#table1").css({"border-color": "#000000",
"border-width":"1px",
"border-style":"solid",
"visibility" : "visible",
//"position" :"fixed",
//"resize":"both",
"overflow":"auto",
"width":"60px",
//"maxlength":"10",
"height": "80px"//,
// "top": top1, // undefined
// "left" : left1 // undefined
});
}
else
{
alert("hello");
("#table1").css({"border-color": "#000000",
"border-width":"0px",
"border-style":"solid",
"visibility" : 'hidden',
//"position" :"fixed",
"resize":"both",
"overflow":"auto",
"width" :"60px",
"height" : "80px",
"top": "30px",
"left" : "80px"});
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="testButton">displayResult</button>
<form>
<div id="table1"></div>
</form>
<button type="button" id="button" onclick="getdata()">Insert data</button>
</body>
</html>
关于javascript - 没有输入时隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16249921/