Mengelola beberapa kotak komentar 'diatur' pada satu halaman - bedakan dan perlakukan dengan benar

Saya memiliki beberapa kotak komentar dari konten di halaman yang sama dan saya kesulitan mengidentifikasinya untuk memperlakukannya dengan benar - misalnya, tidak masalah di mana saya mencoba mengirim komentar saya (dari kotak komentar mana) - selalu mendapat diposting ke kotak komentar pertama di suatu halaman atau saya berjuang dengan masukan untuk mendapatkan izin setelah saya memposting komentar saya tetapi masukan hanya dibersihkan di kotak komentar pertama yang sama. Ini yang saya punya: (AJAX)

    $(function() {
     $(".comm").click(function() {
    var parentDiv = $(this).parent('.post_comment').next().children(":first");  
    var comment = $(this).parent('.post_comment').find('.comment').val();
     var name = document.getElementById("username").value;
     var idv = $(this).parent('.post_comment').find("#idv").val();
    var posthere =            $(this).parent().siblings('.wrap_comment').find('#wrap').attr('class');

   alert(idv);
  if(comment=='')
  {
    alert("Enter some text..");
     $("#content").focus();
      }
   else
        {
      $.ajax({
  type: "POST",
  url: "river_flow.php",
  data: 
  {  username: $("#username").val(),
     idv: $(this).parent('.post_comment').find(".idv").val(),
     comment: $(this).parent('.post_comment').find('.comment').val()},

    cache: false, 
   success: function(data){    
    $('#show').after(data);
    $(this).find('.comment').css('background-color','red');

   $("#content").focus();
    }})   
    return false;
        }})})

(HTML)

<div class='com'><button class='click_and_comment'>Give it a comment</button>

              <div class='post_comment'>
              <img class='end' src="img/end.png" alt='close'/>
                   <input type="hidden" id="username" value="<?php echo $_SESSION['username'] ?>" name='username'/>
                   <input type="hidden"class='idv' id="idv" value="<?php echo $row['idv']; ?>" name='idv'/>
                   <textarea type='text' class="input_comment comment"   placeholder='What do you think?' name='comment' id='comment' ></textarea>
                   <input type='submit' name='comment_submit' class="comment_submit comm" id='comm'/>

              </div>


                 <div class='wrap_comment' id="<?php echo $row['idv']; ?>" >


                 <div id="show" align="left" class="<?php echo $row['idv']; ?>" ></div>
                    <?php
                    $idvc = $row['idv'];

                    $query = " SELECT * FROM comments WHERE idvc= '$idvc' ORDER BY datec DESC;";

                    $result = mysqli_query($conn,$query);

                    while ($bow = mysqli_fetch_assoc($result)) {
       echo "<div class='each_comment' id='<?php echo $bow[idvc];?>' >".$bow['commentc']."</div> ";}

                    ?>
                 </div>

Jadi, untuk membentuk masalah saya dalam sebuah pertanyaan: bagaimana saya bisa memposting komentar pengguna masing-masing ke tempat mereka 'perlu' diposting dan bagaimana cara membersihkan hanya input 'saat ini' atau 'ini' - tidak selalu yang pertama. Sekali lagi - semuanya berfungsi dengan sempurna, masalahnya adalah selalu ada lebih dari satu kotak komentar dan saya perlu membedakannya dan memperlakukannya secara sesuai. Inilah tebakan saya yang tidak berhasil (jika bertentangan saya tidak akan berada di sini) dan, tolong, jelaskan, mengapa tidak berhasil, karena sederhana saja:

$(this).find('#comment').value = '';

tidak berhasil! mungkin ia tidak 'melihat' atribut ini. Tapi kenapa?! Jadi. inilah tebakan saya:

 $(this).parent('.post_comment').siblings('.wrap_comment').find('#show').after(data);

(itu untuk postingan komentar dan ini tebakan saya untuk input clearing :)

$(this).parent('.post_comment').find('#comment').val('');

Saya menemukan sesuatu seperti:

$('#komentar').removeAttr('nilai');

tidak berfungsi di sana - saya tidak berbicara tentang kebingungan murni yang saya dapatkan ketika hal ini tidak berfungsi:

$(this).find('.comment').css('background-color','red');

Whoof. Jadi, saya harap seseorang dapat menjelaskan semua ini sedikit untuk saya. Saya pemula, jujur ​​saja. Terima kasih!


person Donalda Donalda    schedule 06.04.2016    source sumber
comment
Oke. bisakah Anda memberi saya tautannya?   -  person Donalda Donalda    schedule 06.04.2016
comment
stackoverflow.com/questions/36358422/   -  person shivgre    schedule 06.04.2016
comment
Terima kasih izinkan saya memeriksa apa yang dapat saya lakukan untuk membantu di sini   -  person shivgre    schedule 06.04.2016
comment
ini dia! tolong bantu saya dengan masalah ini   -  person Donalda Donalda    schedule 06.04.2016
comment
Saya tidak dapat menemukan di mana tepatnya Anda mengalami masalah, apakah itu baris tertentu dalam kode jquery Anda?   -  person shivgre    schedule 06.04.2016
comment
$('#tampilkan').setelah(data); document.getElementById('comment').value=''; Di Sini. itu diposting secara tidak benar. tidak secara dinamis ke div dengan komentar yang dipilih pengguna untuk diposkan tetapi selalu ke yang pertama. punya ide?   -  person Donalda Donalda    schedule 06.04.2016
comment
Ya, saya pikir Anda memposting permintaan ajax ketika pengguna berkomentar. Bagaimana komentar pengguna, apakah itu tombol kirim atau acara onblur pada input komentar?   -  person shivgre    schedule 06.04.2016
comment
jika ajax Anda diaktifkan oleh onblur (ketika pengguna mengklik di tempat lain setelah memasukkan komentar) maka Anda dapat menggunakan $(ini) untuk mengetahui kotak komentar mana yang dimasukkan dan kemudian menyimpan nilai ini dalam sebuah variabel dan kemudian meresponsnya di ajax Anda   -  person shivgre    schedule 06.04.2016
comment
Saya sudah mengeditnya! coba lihat.   -  person Donalda Donalda    schedule 06.04.2016
comment
Jawaban yang diposting tolong periksa, saya belum melihat kotak komentar lain kecuali satu di dalam div utama Anda dengan class = com   -  person shivgre    schedule 06.04.2016


Jawaban (1)


Gunakan skrip di bawah ini dan ganti skrip Anda yang relevan dengan kode ini. Saya tidak menemukan banyak kotak komentar di dalam div Anda dengan class="com" jadi saya berasumsi itu hanya ada di dalam div ini dan tidak di tempat lain:

$(function() {
        $(".com").click(function() {

            //##############################$(this) here refers to div with class="com" as this is the element on which click event has happened#####################
            var myThis = $(this);
            //var parentDiv = $(this).parent('.post_comment').next().children(":first");  

            //since div with class="post_comment" is inside div with class="com" so it is child to that div and not parent
            var parentDiv = $(this).find('.post_comment').next().children(":first"); 

            //var comment = $(this).parent('.post_comment').find('.comment').val();
            var comment = $(this).find('.post_comment .comment').val();//find element with class="comment" whose parent is div with class="post_comment"

            var name = document.getElementById("username").value;

            //var idv = $(this).parent('.post_comment').find("#idv").val();
            var idv = $(this).find(".post_comment #idv").val();//find element with id="idv" whose parent is div with class="post_comment"

            //####Not sure what is the use of below statement
            var posthere = $(this).find('.wrap_comment #wrap').prop('class');

            alert(idv);
            if (comment == '')
            {
                alert("Enter some text..");
                $("#content").focus();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "river_flow.php",
                    data: {username: $("#username").val(),
                                idv: idv,
                                comment: comment 
                    },
                    cache: false,
                    success: function (data) {
                        $('#show').after(data);
                        //### $(this) here will not point to your div with class="com" as it is in different context inside your ajax success function
                        //##$(this).find('.comment').css('background-color', 'red');
                        myThis.find('.comment').css('background-color', 'red');

                        $("#content").focus();
                    }
                });
                return false;
            }
        });
    });
person shivgre    schedule 06.04.2016