这是我的 js 部分代码:
$(document).ready(function(){
//For first textArea
$("#showTextArea1").click(function(){
$('#area1').css('display','block');
$('#addingText1').css('display', 'none');
$('#add1').click(function(){
var text = $('textarea#txtarea1').val();
if(text!=''){
$('p#p1').text(text); $('#area1').css('display','none');
}
else{
$('#error1').css('display','block');
}
});
$('#remove1').click(function(){
$('#area1').css('display','none');
$('#addingText1').css('display', 'block');
});
});
//For 1st title
$("#showTitle1").click(function(){
$('#area1').css('display','block');
$('#addingText1').css('display', 'none');
$('.add1').click(function(){
var text = $('.forTitle1').val();
if(text!=''){
$('h2#h21').text(text);
$('#area1').css('display','none');
}
else{
$('#titleError1').css('display','block');
}
});
$('#remove1').click(function(){
$('#area1').css('display','none');
$('#addingText1').css('display', 'block');
});
});
});
function refreshPage(){
window.location.reload();
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="container">
<div class="row">
<article class="col-md-4">
<div class="border">
<p id="p1"></p>
<h2 id="h21"></h2>
<div id="addingText1">
<h4 class="title" id="showTextArea1">Add Description</h4>
<h4 class="subTitle" id="showTitle1">Add Title</h4>
</div>
<div id="area1" style="display: none;">
<textarea id="txtarea1" class="forTitle1" placeholder="Add Description"></textarea>
<input type="button" class="add1" value="+" id="add1" />
<input type="button" class="removeclass1" value="-" id="remove1" />
<p id="error1" style="display: none;">Please enter text</p>
<p id="titleError1" style="display: none;">Please enter title</p>
</div>
</div>
</article>
<div class="col-md-12 col-xs-6 text-right">
<button class="resetProperty" type="reset" onClick="refreshPage()">Clear All</button>
</div>
</div>
</section>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
我想要的是，如果我将 9 放入 jQuery 中，将自动创建 9 个 div，如果我写入 7，将创建 7 个网格，我还希望函数可以动态运行。
最佳答案
<!-- HTML Code -->
<input type ="text" id="count"/>
<input type="button" id="create" value="Create"/>
<div id="divs"/>
<!-- JS Code -->
<script>
$('#create').on('click',function(){
$('#divs').html('')
console.log( $('#count').val());
for(i=0; i < parseInt( $('#count').val()) ; i++){
$('#divs').append('<div style="height:100px; width:100px ;margin:10px;background:red;"></div>');
}
});
</script>
关于javascript - 需要网格和功能动态使用 jquery/javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40925051/