javascript - jQuery this 指向的疑问
滿天的星座
滿天的星座 2017-07-05 11:05:00
[JavaScript讨论组]

需求:
一个列表,每列都有一个“修改”按钮,点击修改按钮后可以弹出一个textarea来填写内容并保存到对应的列表中
疑问:
如果使用循环每次在保存第二个列表的修改内容时,会把前一个修改过的列表内容覆盖掉。
代码:html

  • 添加备注

    修改
  • 添加备注

    修改
  • 添加备注

    修改

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 + '修改' ); 
    });
});

方法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又有问题,反复试了各种办法也不行,实在是不知道错哪里了,
希望有人给指点一点。谢谢大家了

滿天的星座
滿天的星座

全部回复(2)
漂亮男人
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 添加一个监听事件,所以每点一次就多响应一次。

阿神

多谢楼上几位哥哥在端午放假期间能回答我的问题,非常感谢你们,每个答案我都给我很多启示,谢谢!!!
但答案只能采纳一个,我看了一下几位哥哥的声望,我就采纳了 噢漏 的答案。谢谢!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号