javascript - Paparkan dan sembunyikan isu kotak balasan ulasan

Question

Baru-baru ini saya membalas komen artikel, dan struktur jadual adalah jelas. Walau bagaimanapun, semasa membuat halaman depan, saya tidak pasti sama ada kotak balasan dijana terlebih dahulu berdasarkan templat, atau apabila pengguna mengklik butang balasan, js ditambah secara dinamik di bawah ulasan semasa saya memikirkannya untuk a sementara. Menjananya terlebih dahulu akan menjadi lebih mudah dalam mendapatkan nilai Tidak seperti penjanaan dinamik dalam js, yang memerlukan elemen cari, tambah elemen, dll., Saya tidak pasti tentang ini , bagaimana untuk menilai satu klik untuk membalas? Tunjukkan kotak balasan dan sembunyikannya dengan mengkliknya semula Apabila anda mengklik butang balasan yang lain, kotak balasan asal disembunyikan sangat jelas. Saya harap pakar boleh memberi saya nasihat. Terima kasih terlebih dahulu

Answer 1

Andaikan struktur HTML anda adalah seperti berikut

<p class="article">
    <button class="reply-btn">回复</button> 
    <p class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </p>
</p>
<p class="article">
    <button class="reply-btn">回复</button> 
    <p class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </p>
</p>

1. Berkenaan kewujudan kotak kandungan balasan, saya secara peribadi berpendapat bahawa ia harus diberikan terlebih dahulu untuk mengelakkan manipulasi DOM yang berlebihan apabila mengklik, yang akan menjejaskan kecekapan. Dan kod html yang dilampirkan kemudian boleh menyebabkan kod js tidak berkuat kuasa padanya~

2. Apabila kotak balasan dipaparkan, ia mempunyai kelas tunjukkan Apabila kotak balasan yang dipaparkan diklik, kelas tunjukkan dialih keluar untuk menunjukkan bahawa kotak balasan telah disembunyikan, dan kemudian program menentukan sama ada kotak balasan mengandungi . menunjukkan kelas.

$('.reply-btn').click(function(){
    var $commentWrap = $(this).siblings('.comment-wrap');
    // 3. 点击其他回复按钮时，原先的回复框隐藏
    $(this).parent('.article').siblings().find('show.comment-wrap').hide();
    
    // 判断点击一次回复，显示回复框，再点击一次就隐藏
    if($commentWrap.hasClass('show')){
        // 隐藏
        $commentWrap.removeClass('show').hide();
    }else{
        // 显示
         $commentWrap.addClass('show').show();
    }
});

Sila pakai jika anda berpuas hati~

Answer 2

Adalah disyorkan untuk mencari suis tab dan mempelajarinya Prinsipnya serupa

.