javascript - Questions soulignées par jQuery this

Question

Exigences :
Une liste, chaque colonne a un bouton "Modifier". Après avoir cliqué sur le bouton Modifier, une zone de texte peut apparaître pour remplir le contenu et l'enregistrer dans la liste correspondante.
Question :
Si vous utilisez une boucle pour. enregistrez la deuxième liste à chaque fois. Lors de la modification du contenu, le contenu de la liste modifié par la précédente sera écrasé. 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, méthode-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>' ); 
    });
});

Méthode 2 : Traitement en boucle, le contenu qui a été modifié

précédemment sera également écrasé

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

Je suis aux prises avec ce problème depuis longtemps. Bien que j'aie trouvé une alternative, je pense que cette solution n'est pas très bonne si le code HTML est modifié plus tard, il ne sera pas utilisable. la valeur de l'index, et puis cela a un problème, j'ai essayé différentes méthodes encore et encore mais rien ne fonctionne, je ne sais vraiment pas où je me suis trompé

J'espère que quelqu'un pourra me donner quelques conseils. Merci à tous

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

Changez-le simplement par ceci.

ou

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

Étant donné que vous avez ajouté un événement d'écoute à .sure 元素的 on 事件放在了 li span 的点击事件，相当于你每点击一下 span，就会给 .sure, celui-ci répondra une fois de plus à chaque clic.

Answer 2

Il y a des problèmes avec les deux morceaux de code.

Si vous êtes dans un click 事件里面绑定了另一个 click, cet événement sera lié à plusieurs reprises à chaque fois que vous cliquerez sur le bouton.

L'une des solutions les plus simples mais inefficaces consiste à dissocier le bouton une fois la fenêtre contextuelle fermée.

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

https://jsfiddle.net/gLfsa02b/

Answer 3

J'ai failli me faire jeter dans le fossé par toi... Quand ce n'était pas le cas this 的问题，而是因为每次点击 span 都会给 .sure 绑定一次事件，所以后来点 .sure, n événements se sont déclenchés, dont le précédent. Ainsi, l'effet que vous voyez est que les précédents sont également écrasés.

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

Merci aux frères à l'étage d'avoir répondu à mes questions pendant les vacances du Dragon Boat Festival. Merci beaucoup. Chaque réponse me donne beaucoup d'inspiration. ! !
Mais une seule réponse peut être acceptée. J'ai regardé la réputation de plusieurs frères, et j'ai adopté la réponse d'Oh Le. Merci!