Dom对象和Jquery对象不是也一样的，不能混用。
document.getElementById('b') 得到的是dom对象
let inputs = $('#content input') 得到的是Jquery对象，如果想调用jquery对象的attr方法，则需要用
inputs.eq(i).attr('name','xxx'),而不能用inputs[i].attr('name','xxx'),否则就会报inputs[0].attr is not a function
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../src/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
.site-demo-button {
padding: 20px
}
.layui-form-item .layui-input-inline {
width: 400px;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>恭喜你：又学到一首新诗了！</legend>
</fieldset>
<br>
<br>
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">诗歌名称</label>
<div class="layui-inline" style="width: 400px">
<input type="text" class="layui-input" name="name">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">朝代</label>
<div class="layui-inline">
<input type="text" class="layui-input" name="dynasty">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">作者</label>
<div class="layui-inline">
<input type="text" class="layui-input" name="author">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">正文</label>
<div class="layui-inline" id="content">
<div class="layui-inline">
<input type="text" class="layui-input layui-input-inline" name="content-0">
<button type="button" class="layui-btn layui-btn-normal btn-add">添加</button>
</div>
<br>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="save">保存</button>
</div>
</div>
</form>
<script src="../src/layui.js" charset="utf-8"></script>
<script src="../template/js/jquery.3.2.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer;
//监听提交
form.on('submit(demo1)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
$(function () {
let btnAdd = $('#content .btn-add');
btnAdd[0].addEventListener('click', function (e) {
// console.log($(this).parent().children(':first').val())
$('#content').append("<div class=\"layui-inline\">\n" +
" <input type=\"text\" class=\"layui-input layui-input-inline\">\n" +
" <button type=\"button\" class=\"layui-btn layui-btn-danger btn-delete\">删除</button>\n" +
" </div><br>")
let btnAdd2 = $('#content .btn-delete');
for (let j = 0; j < btnAdd2.length; j++) {
btnAdd2[j].addEventListener('click', function () {
$(this).parent().next().remove()
$(this).parent().remove()
})
}
//重置所有content的name
let inputs = $('#content input')
for (let i = 0; i < inputs.length; i++) {
inputs.eq(i).attr('name', 'content-' + i);
}
})
});
</script>
</body>
</html>
网友评论