动态添加div代码如下:
$(document).ready(function() {
//设置添加column最多为6个
var columnMax = 6;
if ($('div.column').size() >= columnMax) {
$(obj).hide();
}
//为img.add图标添加点击事件用于动态创建div
$("img.add").click(function() {
addColumn(this, columnMax);
});
});
//栏目的动态添加及上移
function addColumn(obj, sm) {
//div_left用于放input,div_right用于放upmove图标
$('#config_info').prepend(
'<div class="column">'+
'<div class="div_left">'+
'<p class = "p_message">'+
'标题:'+ '<input class="copt" type="text" placeholder="新内容" value="">'
+ '</p>'+
'</div>'+
'<div class="div_right">'+
'<img src="img/arrow_up_16px.png" class="upmove" />'+
'</div></div>');
// //上移
// $('#config_info').find("img.upmove").click(function(){
//
// var p = $(this).parent().parent('.column');
// var index = $("#config_info > div").index(p);
// if(index == 0){
// alert("已经在最上面");
// return;
// }
// else{
// $("#config_info > div").eq(index-1).before($("#config_info > div").eq(index));
// }
// });
//栏目最多六个
if ($('div.column').size() >= sm) {
$(obj).hide();
}
};
}
注释掉上移部分代码是因为放在那里执行的话动态添加n次,点击upmove也会上移n次,想问有没有好的修改方法,或者怎么实现这上移操作。
将 addColumn 中的 事件绑定的代码(目前注释掉的) 删除掉,
然后在 ready 中新增下面这样的代码:
//上移
$('#config_info').on('click', 'img.upmove', function(){
var p = $(this).parent().parent('.column');
var index = $("#config_info > div").index(p);
if(index == 0){
alert("已经在最上面");
return;
} else{
$("#config_info > div").eq(index-1).before($("#config_info > div").eq(index));
}
});
主要功能的代码没变, 只是改变了事件的绑定机制.
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。