javascript - jQuery this 指向的疑問

Question

需求：
一個列表，每列都有一個「修改」按鈕，點擊修改按鈕後可以彈出一個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又有問題，反覆試了各種辦法也不行，實在是不知道錯哪裡了，
希望有人給指點一點。謝謝大家了

Answer 1

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 增加一個

span🎜，就會給🎜.sure🎜 增加一個。一次就多響應一次。 🎜

Answer 2

兩段程式碼都有問題啊。

你在一個 click 事件裡面綁定了另一個 click，那麼每次這個按鈕點擊的時候都會重複綁定這個事件的。

一個最簡單但是不高效的解決方式就是：當彈出關閉後，為按鈕解綁。

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

https://jsfiddle.net/gLfsa02b/

Answer 3

差點被你帶溝裡…這個不是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/

Answer 4

多謝樓上幾位哥哥在端午放假期間能回答我的問題，非常感謝你們，每個答案我都給我很多啟示，謝謝！ ！ ！
但答案只能採納一個，我看了一下幾位哥哥的聲望，我就採納了 噢漏 的答案。謝謝！