首页  >  问答  >  正文

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

滿天的星座滿天的星座2685 天前1023

全部回复(4)我来回复

  • 漂亮男人

    漂亮男人2017-07-05 11:07:00

    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 添加一个监听事件,所以每点一次就多响应一次。

    回复
    0
  • phpcn_u1582

    phpcn_u15822017-07-05 11:07:00

    两段代码都有问题啊。

    你在一个 click 事件里面绑定了另一个 click,那么每次这个按钮点击的时候都会重复绑定这个事件的。

    一个最简单但是不高效的解决方式就是:当弹出关闭后,为按钮解绑。

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

    https://jsfiddle.net/gLfsa02b/

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-07-05 11:07:00

    差点被你带沟里……这个不是 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/

    回复
    0
  • 阿神

    阿神2017-07-05 11:07:00

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

    回复
    0
  • 取消回复