我有 1 个包含 4 个div 和 1 个按钮的 html 页面。我使用 jQuery 并期望在单击按钮时，系统会检查div2 的内容是否为空，div3，div4 为空，然后为div2 添加内容。如果div2 的内容是非空的，而div3，div4 是空的，那么添加div3 的内容，... 我想先点击，然后检查div2 的内容并为div2 添加内容，第二次，检查div3 的内容并为div3 添加内容，...
我在下面运行的代码只添加了div2，并没有向div3 或div4 添加内容。
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='D:/test/jquery-form/jquery-3.4.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#div2").empty();
$("#div3").empty();
$("#div4").empty();
});
$(document).ready(function(){
$("#btn").click(function(){
if(($("#div1").text().length>0)&&($("#div2").text().length===0))
{
$("#div2").append("<input type=text name=t2 value='service2'>");
} else if(($("#div2").text().length>0)&&($("#div3").text().length===0))
{
$("#div3").append("<input type=text name=t3 value='service3'>");
}
else if(($("#div2").text().length>0)&&(($("#div3").text().length>0))&&($("#div4").text().length===0))
{
$("#div4").append("<input type=text name=t4 value='service4'>");
}
});
});
</script>
</head>
<body>
<div id="intl">
<div id="div1">
service 1
</div>
<div id="div2">
service 2
</div>
<div id="div3">
service 3
</div>
<div id="div4">
service 4
</div>
$(document).ready(function(){
$("#div2").empty();
$("#div3").empty();
$("#div4").empty();
});
$(document).ready(function(){
$("#btn").click(function(){
if(($("#div1").html().length>0)&&($("#div2").html().length===0))
{
$("#div2").append("<input type=text name=t2 value='service2'>");
} else if(($("#div2").html().length>0)&&($("#div3").html().length===0))
{
$("#div3").append("<input type=text name=t3 value='service3'>");
}
else if(($("#div2").html().length>0)&&(($("#div3").html().length>0))&&($("#div4").html().length===0))
{
$("#div4").append("<input type=text name=t4 value='service4'>");
}
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<intput type="button" id="btn" name="btn" value="click me" />Click Me
<br />
<div id="intl">
<div id="div1">
service 1
</div>
<div id="div2">
service 2
</div>
<div id="div3">
service 3
</div>
<div id="div4">
service 4
</div>
</div>
</body>
</html>