项目中需要在前端实现：
-
用户输入数字
n
，动态生成
n
个元素，删除
n
，自动清空
n
个元素（如图一）；
-
用户输入数字
n
，失焦生成
n
个元素，再聚焦修改
n
，自动清空
n
个元素（如图二）；
需求一实现方式：
1 <input type="number" placeholder="请输入图片数量" id="img_num" name="img_num" />张
3 <li id="img_upload"></li>
5 <script>
6 $('#img_num').bind('input propertychange',function() {
7 $("#img_upload").empty();
8 var text = $('input[name="img_num"]').val();
9 //console.log(text);
10 for (let i =1;i<=text;++i){
11 $("<li id='preview_"+i+"'><b>*</b> <span>图片"
12 +i+
13 ": </span><span ><input name='img[]' type='file' id='imgFile_"+i+
14 "' accept='image/*' /></span> </li>").appendTo($('#img_upload'));
15 }
16 });
17 </script>
需求二实现方式：
1 <input type="number" placeholder="请输入图片数量" id="img_num" name="img_num" />张
2 <li id="img_upload"></li>
3 <script>
5 // 聚焦清空
6 $('#img_num').focus(function(){
7 $('#img_upload').empty();
8 })
10 // 失焦写入；动态生成input上传框
12 $('#img_num').blur(function() {
13 $("#img_upload").empty();
14 var text = $('input[name="img_num"]').val();
15 console.log(text);
16 for (let i =1;i<=text;++i){
17 $("<li id='preview_"+i+"'><b>*</b> <span>图片"
18 +i+
19 ": </span><span ><input name='img[]' type='file' id='imgFile_"+i+
20 "' accept='image/*' /></span> </li>").appendTo($('#img_upload'));
21 }
22 });
23 </script>
针对关键点总结：
|
事件方法名
|
用法
|
释义
|
|
bind
|
el.bind(“oninput，propertychange”,function(){})①
|
绑定元素，监听元素
|
|
focus
|
el.blur(function(){})
|
input框聚焦时执行
|
|
blur
|
el.blur(function(){})
|
input框失焦时执行
|
①：
bind中 oninput 和 propertychange，
都是事件对象，
是在值改变时立即触发；只是后者是
用以替代oninput在IE9以下的不兼容性；另：
onchange是在值改变后失去焦点才触发，并且可以用在非输入框中，如：select等
相关链接：
https://www.cnblogs.com/LHYwin/p/6136256.html.bind('input propertychange'
propertychange
转载于:https://www.cnblogs.com/chig/p/11353247.html
项目中需要在前端实现：用户输入数字n，动态生成n个元素，删除n，自动清空n个元素（如图一）；用户输入数字n，失焦生成n个元素，再聚焦修改n，自动清空n个元素（如图二）；图一：图二：需求一实现方式： 1 <input type="number" placeholder="请输入图片数量" id="img_num" name="img_...
<
input
type="text" id="inp"><
input
type="button" value="切换" id="btn"><br>
<img src="img/1.jpg" alt="" id="pic">
<p id="txt">显示的是img/1.jpg</p>
标题写得不是很明白，结合以下的效果图，在这里描述一下这个功能，当在
input
框中
输入
数字
几，下面就会产生多少条数据（这里
输入
数字
2，下面产生两条数据，下图中的每一行为 一条数据）。
实现的思路
1、在
input
框中
绑定回车事件和得焦事件，并且使用v-model绑定一个变量PepNumber，该变量用于绑定
input
框中
输入
的值；
2、将下面的每一条数据定义为对象obj；
3、定义一个变量PepoleNumber，该变量为数组类型；
4、在每一条数据的最外层div中绑定定义的那个数组类型的变量；
<script language="
javascript
" type="text/
javascript
">
var txtText4 = "#" + '<%= new DynamicControl(this, "Text4").ClientID%>';
$(function () {
$(...
if (user
Input
>= 1 && user
Input
<= 10) {
if (user
Input
=== randomNumber) {
alert("恭喜您猜对了！");
} else {
alert("很遗憾，您猜错了，正确答案是" + randomNumber);
} else {
alert("请
输入
一个1到10之间的
数字
！");
首先，使用 `Math.random()`
方法
生成
一个0到1之间的随机小数，乘以10后取整得到1到10之间的随机整数。然后，使用 `prompt()`
方法
让用户
输入
一个
数字
，并使用 `parseInt()`
方法
将用户
输入
的字符串转换为整数。接下来，判断用户
输入
是否在1到10之间，如果是则判断是否猜对了，如果不是则提示用户重新
输入
。最后，使用 `alert()`
方法
弹出结果。
