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/

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