javascript - jQuery this 指向的疑問
問題描述
需求:一個列表,每列都有一個“修改”按鈕,點擊修改按鈕后可以彈出一個textarea來填寫內(nèi)容并保存到對應(yīng)的列表中疑問:如果使用循環(huán)每次在保存第二個列表的修改內(nèi)容時,會把前一個修改過的列表內(nèi)容覆蓋掉。代碼: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:循環(huán)處理,同樣會出現(xiàn)覆蓋掉前一次修改過的內(nèi)容
$(’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)}); });});
這個問題已經(jīng)折騰了很久,雖然找到了一個替代方案,但覺得這個方案不是很好,如果后期html有改動的話,就沒法用了,但用each來循環(huán)取index索引值,然后this又有問題,反復(fù)試了各種辦法也不行,實在是不知道錯哪里了,希望有人給指點一點。謝謝大家了
問題解答
回答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 添加一個監(jiān)聽事件,所以每點一次就多響應(yīng)一次。
回答2:兩段代碼都有問題啊。
你在一個 click 事件里面綁定了另一個 click,那么每次這個按鈕點擊的時候都會重復(fù)綁定這個事件的。
一個最簡單但是不高效的解決方式就是:當彈出關(guān)閉后,為按鈕解綁。
$(’.sure’).off(’click’);
https://jsfiddle.net/gLfsa02b/
回答3:差點被你帶溝里……這個不是 this 的問題,而是因為每次點擊 span 都會給 .sure 綁定一次事件,所以后來點 .sure 的時候,觸發(fā)了 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/
回答4:多謝樓上幾位哥哥在端午放假期間能回答我的問題,非常感謝你們,每個答案我都給我很多啟示,謝謝!!!但答案只能采納一個,我看了一下幾位哥哥的聲望,我就采納了 噢漏 的答案。謝謝!
相關(guān)文章:
1. angular.js - angular內(nèi)容過長展開收起效果2. 關(guān)于nginx location配置的問題,root到底是什么3. angular.js - angularjs的自定義過濾器如何給文字加顏色?4. docker鏡像push報錯5. 關(guān)于docker下的nginx壓力測試6. 大家好,請問在python腳本中怎么用virtualenv激活指定的環(huán)境?7. 并發(fā)模型 - python將進程池放在裝飾器里為什么不生效也沒報錯8. python的前景到底有大?如果不考慮數(shù)據(jù)挖掘,機器學習這塊?9. python 怎樣用pickle保存類的實例?10. python2安裝失敗
