javascript - jQuery this 指向的疑问

问题描述

需求：一个列表，每列都有一个“修改”按钮，点击修改按钮后可以弹出一个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 style='display: none;'></p><p 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又有问题，反复试了各种办法也不行，实在是不知道错哪里了，希望有人给指点一点。谢谢大家了

问题解答

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 添加一个监听事件，所以每点一次就多响应一次。

两段代码都有问题啊。

你在一个 click 事件里面绑定了另一个 click，那么每次这个按钮点击的时候都会重复绑定这个事件的。

一个最简单但是不高效的解决方式就是：当弹出关闭后，为按钮解绑。

$(’.sure’).off(’click’);

https://jsfiddle.net/gLfsa02b/

差点被你带沟里……这个不是 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/

多谢楼上几位哥哥在端午放假期间能回答我的问题，非常感谢你们，每个答案我都给我很多启示，谢谢！！！但答案只能采纳一个，我看了一下几位哥哥的声望，我就采纳了 噢漏 的答案。谢谢！