实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片管理器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>
<label for="img_url">照片</label>
<input type="text" id="img_url" >
</p>
<p>
无<input name="radio" type="radio" checked="" value="0">
圆角<input name="radio" type="radio" value="10%">
圆<input name="radio" type="radio" value="50%">
</p>
<p>
<select name="" id="select">
<option value="">无</option>
<option value="3px 3px 2px #ccc" selected="">有</option>
</select>
</p>
<button>添加</button>
<div class="main" style="width:320px;"><ul></ul></div>
</body>
<style>
.main li{float: left;width: 130px}
</style>
<script>
$("button").on('click',function(){
//在这个作用域创建的元素，只能在这个作用域内调用class="qian
var img=$("input:first").val();
var yuan=$(':input:checked').val();
var shadow=$('#select option:selected').val();
var qian=$('<button class="qian">').text('前移');
var hou=$('<button class="hou">').text('后移');
var remove=$('<button class="remove">').text('删除');
var img=$('<img width="120">').attr('src',img).css({"box-shadow":shadow,"border-radius":yuan});
var li=$('<li>').append(img,qian,hou,remove);
$('ul').append(li);
qian.click(function(){
$(this).parent().prev().before($(this).parent())
})
hou.click(function(){
$(this).parent().next().after($(this).parent())
})
remove.click(function(){
$(this).parent().remove()
})
console.log(yuan,shadow,img);
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
