Tek bir sayfada birden fazla yorum kutusunu 'set' olarak yönetme - bunları ayırt etme ve doğru bir şekilde davranma

Question

Aynı sayfadaki içeriğin birden fazla yorum kutusuna sahip olduğumu ve bunları doğru bir şekilde ele almak için onları tanımlayan sıkıntılarım var - örneğin, (yorum kutusundan) yorumumu göndermeyi denediğim bir konu - her zaman bir sayfada ilk yorum kutusuna gönderilir veya yorumumu gönderdikten sonra girişimi temizlemek için girdim ama giriş yalnızca ilk önce temizler yorum Kutusu. İşte ne var: (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) Yani

<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> 

, bir soru sorunumu oluşturmak üzere: onlar için 'ihtiyaç' nerede nasıl sırasıyla kullanıcılar yorum gönderebilir gönderilmeli ve yalnızca 'mevcut' veya 'bu' girişi nasıl temizlerim - her zaman ilk değil. Yine - her şey sadece mükemmel çalışır, sorun her zaman bir yorum kutusunun daha fazla olması ve onları ayırt etmem ve onlara göre davranmam gerekiyor. İşte (ben burada olmazdım çelişki üzerine) çalışmıyor benim tahmin ve, exmplain, neden onlar bile basit coz çalışmıyor lütfen:

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

çalışmıyor! belki bu özelliği görmez. Ama neden?! Yani. Burada benim tahmin niteliğindeki:

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

(bu yorum yazı için ve bu :)

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

ben gibi bir şey buldum takas girişi için benim tahminim:

$ ('# comment') .removeAttr ('değeri'); ither

çalışmıyor - saf ölü karışıklık söz etmediğimi ben aldığımda bu malzeme çalışmıyor:

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

Whoof. Yani, umarım birisi bunu benim için biraz temizleyebilir. Ben acemi dürüstüm. Thanx!

Answer 1

Aşağıdaki kodu kullanın ve ilgili kod dosyanızı bu kodla değiştirin. Sınıfınızın içinde birden fazla yorum kutusu bulamadım class = "com" bu yüzden sadece bu divanın içinde olduğunu ve başka bir yerde olmadığını varsadım:

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