国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術(shù)文章
文章詳情頁

javascript - jQuery this 指向的疑問

瀏覽:118日期:2023-02-16 17:47:06

問題描述

需求:一個列表,每列都有一個“修改”按鈕,點擊修改按鈕后可以彈出一個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:

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

標簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 夜色亚洲 | 大毛片a大毛片 | 农村寡妇女人一级毛片 | 亚洲欧美日韩国产精品一区 | 欧美一级高清片 | 日韩欧美在线精品 | 欧美a一片xxxx片 | 欧美成人免费在线观看 | 中文字幕咪咪网 | 91久久亚洲精品国产一区二区 | 国产精品一级毛片不收费 | 久久夜色精品国产噜噜亚洲a | 欧美二区在线观看 | 国产成人夜间影院在线观看 | 97在线观看免费视频 | 久久久免费视频播放 | 午夜宅男在线永远免费观看网 | 特级毛片免费视频播放 | 国产三级播放 | 日本一道免费一区二区三区 | 毛片精品 | 99精品视频在线 | 日韩 国产 在线 | 欧美特黄一级高清免费的香蕉 | xxxwww欧美 | 国产永久高清免费动作片www | 亚洲手机视频 | 亚洲精品一区二区三区国产 | 欧美一区欧美二区 | 欧美特级另类xxx | 97视频免费观看2区 97视频免费上传播放 | 啪啪一级片 | a毛片视频 | 国产亚洲精品精品国产亚洲综合 | 国产一区二区三区免费播放 | 国产欧美一区二区日本加勒比 | 欧美三级在线视频 | 国产精品高清一区二区 | 美女黄色网页 | www.成年人| 日韩三级欧美 |