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>
<div id="mask" style="display: none;"></div>
<div 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">
</div>

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

这篇关于javascript - jQuery this 指向的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！