javascript - Soalan yang ditunjukkan oleh jQuery ini

Question

Keperluan:
Senarai, setiap lajur mempunyai butang "Ubah suai" Selepas mengklik butang ubah suai, kawasan teks boleh muncul untuk mengisi kandungan dan menyimpannya ke senarai yang sepadan
Soalan:
Jika anda menggunakan gelung untuk simpan senarai kedua setiap kali Apabila mengubah suai kandungan, kandungan senarai yang diubah suai oleh sebelumnya akan ditimpa. Kod: 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, kaedah-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>' ); 
    });
});

Kaedah 2: Pemprosesan gelung, kandungan yang diubah suai

sebelum ini juga akan ditimpa

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

Saya telah bergelut dengan masalah ini untuk masa yang lama Walaupun saya telah menemui alternatif, saya merasakan bahawa penyelesaian ini tidak begitu baik Jika diubah kemudian, ia tidak boleh digunakan nilai indeks, dan kemudian ini mempunyai Masalah, saya telah mencuba pelbagai kaedah berulang kali tetapi saya tidak tahu di mana silap saya

Saya harap seseorang boleh memberi saya beberapa petunjuk. Terima kasih semua

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

Tukar kepada ini sahaja.

atau

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

Oleh kerana anda menambahkan .sure 元素的 on 事件放在了 li span 的点击事件，相当于你每点击一下 span，就会给 .sure acara mendengar, ia akan membalas sekali lagi setiap kali anda mengklik.

Answer 2

Terdapat masalah dengan kedua-dua keping kod.

Jika anda berada dalam click 事件里面绑定了另一个 click, maka acara ini akan terikat berulang kali setiap kali butang diklik.

Salah satu penyelesaian yang paling mudah tetapi tidak cekap ialah dengan membuka ikatan butang selepas pop timbul ditutup.

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

https://jsfiddle.net/gLfsa02b/

Answer 3

Saya hampir tercampak ke dalam parit oleh awak... Apabila ini tidak this 的问题，而是因为每次点击 span 都会给 .sure 绑定一次事件，所以后来点 .sure, n peristiwa telah dicetuskan, termasuk yang sebelumnya. Jadi kesan yang anda lihat ialah yang sebelumnya juga ditimpa.

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

Terima kasih kepada saudara-saudara di tingkat atas kerana menjawab soalan saya semasa cuti Festival Perahu Naga Terima kasih banyak-banyak. ! !
Tetapi hanya satu jawapan yang boleh diterima Saya melihat reputasi beberapa saudara, dan saya menerima jawapan daripada Oh Le. Terima kasih!