javascript – Fragen, auf die jQuery hier hinweist

Question

Anforderungen:
Eine Liste, jede Spalte verfügt über eine Schaltfläche „Ändern“. Nach dem Klicken auf die Schaltfläche „Ändern“ kann ein Textbereich angezeigt werden, um den Inhalt einzugeben und ihn in der entsprechenden Liste zu speichern Speichern Sie jedes Mal die zweite Liste. Beim Ändern des Inhalts wird der durch die vorherige
geänderte Listeninhalt überschrieben.
Code: 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, Methode-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>' ); 
    });
});

Methode 2: Schleifenverarbeitung, der

zuvor

geänderte Inhalt wird ebenfalls überschrieben

$('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)
        });
    });
});

Ich habe schon lange mit diesem Problem zu kämpfen, obwohl ich das Gefühl habe, dass diese Lösung nicht sehr gut ist. Wenn der HTML-Code jedoch später geändert wird, kann er nicht verwendet werden der Indexwert, und dann ist das Problem, ich habe immer wieder verschiedene Methoden ausprobiert, aber nichts hat funktioniert. Ich weiß wirklich nicht, wo ich einen Fehler gemacht habe Ich hoffe, jemand kann mir ein paar Hinweise geben. Vielen Dank an alle

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

Answer 2

两段代码都有问题啊。

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

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

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

https://jsfiddle.net/gLfsa02b/

Answer 3

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

Answer 4

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