需求:
一个列表,每列都有一个“修改”按钮,点击修改按钮后可以弹出一个textarea来填写内容并保存到对应的列表中
疑问:
如果使用循环每次在保存第二个列表的修改内容时,会把前一个修改过的列表内容覆盖掉。
代码:html
<ul>
<li><p>添加备注</p><span style="color: red">修改</span></li>
<li><p>添加备注</p><span style="color: red">修改</span></li>
<li><p>添加备注</p><span style="color: red">修改</span></li>
</ul>
<p id="mask" style="display: none;"></p>
<p id="edit" style="display: none; border: 1px solid blue;">
<textarea name="" id="" cols="30" rows="10" class="text"></textarea>
<input type="button" value="sure" class="sure">
<input type="button" value="close" class="close">
</p>
jQuery,方法-1
$('li').on('click', 'span', function() {
var me = $(this);
$('#mask').show();
$('#edit').show();
$('.text').val('');
$('.sure').on('click', function() {
$('#mask').hide();
$('#edit').hide();
var text = $('.text').val();
// 这里如果 find('p'),会把之前修改过的P的text也替换了,目前我的替代方法就是去掉 find('p')
me.parent().find('p').html( text + '<span style="color: red">修改</span>' );
});
});
方法2:循环处理,同样会出现覆盖掉前一次修改过的内容
$('li').each(function(index) {
alert(index)
$(this).find('span').on('click', function() {
var me = $(this);
$('#mask').show();
$('#edit').show();
$('.text').val('');
$('.sure').on('click', function() {
$('#mask').hide();
$('#edit').hide();
var text = $('.text').val();
me.parent().find('p').html( text );
// alert(index)
});
});
});
这个问题已经折腾了很久,虽然找到了一个替代方案,但觉得这个方案不是很好,如果后期html有改动的话,就没法用了,但用each来循环取index索引值,然后this又有问题,反复试了各种办法也不行,实在是不知道错哪里了,
希望有人给指点一点。谢谢大家了
漂亮男人2017-07-05 11:07:00
var me;
$('li').on('click', 'span', function() {
me = $(this);
$('#mask').show();
$('#edit').show();
$('.text').val('');
});
$('.sure').on('click', function() {
$('#mask').hide();
$('#edit').hide();
var text = $('.text').val();
me.parent().find('p').html( text + '<span style="color: red">修改</span>' );
});
改成这样就好了。
或者
$('li').on('click', 'span', function() {
var me = $(this);
$('#mask').show();
$('#edit').show();
$('.text').val('');
$('.sure').off('click');
$('.sure').on('click', function() {
$('#mask').hide();
$('#edit').hide();
var text = $('.text').val();
me.parent().find('p').html( text + '<span style="color: red">修改</span>' );
});
});
因为你把 .sure
元素的 on
事件放在了 li span
的点击事件,相当于你每点击一下 span
,就会给 .sure
添加一个监听事件,所以每点一次就多响应一次。
phpcn_u15822017-07-05 11:07:00
两段代码都有问题啊。
你在一个 click
事件里面绑定了另一个 click
,那么每次这个按钮点击的时候都会重复绑定这个事件的。
一个最简单但是不高效的解决方式就是:当弹出关闭后,为按钮解绑。
$('.sure').off('click');
https://jsfiddle.net/gLfsa02b/
伊谢尔伦2017-07-05 11:07:00
差点被你带沟里……这个不是 this
的问题,而是因为每次点击 span
都会给 .sure
绑定一次事件,所以后来点 .sure
的时候,触发了 n 个事件,也包括之前的。所以你看到的效果就是之前的也被覆盖了。
var me;
$("li").on("click", "span", function() {
me = $(this);
$("#mask").show();
$("#edit").show();
$(".text").val("");
});
$(".sure").on("click", function() {
if (!me) {
return;
}
$("#mask").hide();
$("#edit").hide();
var text = $(".text").val();
me.parent().find("p").html(text + '<span style="color: red">修改</span>');
});
https://jsfiddle.net/v5hnhfam/
阿神2017-07-05 11:07:00
多谢楼上几位哥哥在端午放假期间能回答我的问题,非常感谢你们,每个答案我都给我很多启示,谢谢!!!
但答案只能采纳一个,我看了一下几位哥哥的声望,我就采纳了 噢漏 的答案。谢谢!