การจัดการกล่องความคิดเห็นหลายกล่อง 'ตั้งค่า' ในหน้าเดียว - แยกความแตกต่างและปฏิบัติอย่างถูกต้อง

ฉันมีกล่องความคิดเห็นหลายกล่องของเนื้อหาในหน้าเดียวกัน และฉันมีปัญหาในการระบุกล่องความคิดเห็นเหล่านั้นเพื่อปฏิบัติต่อกล่องเหล่านั้นอย่างถูกต้อง - ตัวอย่างเช่น ไม่สำคัญว่าฉันจะลองโพสต์ความคิดเห็นของฉันที่ใด (จากช่องแสดงความคิดเห็นใด) - มันจะได้รับเสมอ โพสต์ไปที่ช่องแสดงความคิดเห็นแรกบนเพจ หรือฉันกำลังต่อสู้กับอินพุตเพื่อล้างข้อมูลหลังจากที่ฉันโพสต์ความคิดเห็น แต่อินพุตจะล้างเฉพาะในช่องแสดงความคิดเห็นแรกเดียวกันเท่านั้น นี่คือสิ่งที่ฉันมี: (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>

ดังนั้นเพื่อสร้างปัญหาของฉันในคำถาม: ฉันจะโพสต์ความคิดเห็นของผู้ใช้ตามลำดับว่าพวกเขา 'ต้องการ' โพสต์ได้อย่างไรและฉันจะทำความสะอาดเฉพาะอินพุต 'ปัจจุบัน' หรือ 'นี้' ได้อย่างไร - ไม่ใช่อันดับแรกเสมอไป อีกครั้ง - ทุกอย่างทำงานได้อย่างสมบูรณ์แบบ ปัญหาคือมักจะมีกล่องแสดงความคิดเห็นมากกว่าหนึ่งช่องเสมอ และฉันต้องแยกแยะความแตกต่างและปฏิบัติต่อพวกเขาตามนั้น นี่คือการเดาของฉันที่ไม่ได้ผล (ในทางกลับกัน ฉันจะไม่อยู่ที่นี่) และโปรดอธิบายว่าทำไมมันถึงไม่ทำงาน เพราะมันง่ายนิดเดียว:

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

ใช้งานไม่ได้! บางทีมันอาจจะไม่ 'เห็น' คุณลักษณะนี้ แต่ทำไมล่ะ! ดังนั้น. นี่คือการเดาของฉัน:

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

(นั่นคือสำหรับการโพสต์ความคิดเห็นและนี่คือการเดาของฉันสำหรับการล้างอินพุต :)

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

ฉันพบบางสิ่งเช่น:

$('#comment').removeAttr('value');

ใช้งานไม่ได้ - ฉันไม่ได้พูดถึงความสับสนที่ฉันได้รับเมื่อสิ่งนี้ใช้งานไม่ได้:

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

โห่. ดังนั้นฉันหวังว่าจะมีคนช่วยอธิบายทั้งหมดนี้ให้ฉันสักหน่อย ฉันเป็นมือใหม่ที่มีความซื่อสัตย์ ขอบคุณ!


person Donalda Donalda    schedule 06.04.2016    source แหล่งที่มา
comment
ตกลง. คุณช่วยส่งลิงค์ให้ฉันหน่อยได้ไหม?   -  person Donalda Donalda    schedule 06.04.2016
comment
stackoverflow.com/questions/36358422/   -  person shivgre    schedule 06.04.2016
comment
ขอบคุณให้ฉันตรวจสอบสิ่งที่ฉันสามารถช่วยได้ที่นี่   -  person shivgre    schedule 06.04.2016
comment
เอาล่ะ! ช่วยฉันด้วยปัญหานี้   -  person Donalda Donalda    schedule 06.04.2016
comment
ฉันไม่สามารถค้นหาได้ว่าคุณมีปัญหาตรงไหน มันเป็นบรรทัดหนึ่งในโค้ด jquery ของคุณหรือไม่?   -  person shivgre    schedule 06.04.2016
comment
$('#show').หลัง(ข้อมูล); document.getElementById('ความคิดเห็น').value=''; ที่นี่. มันโพสต์ไม่ถูกต้อง ไม่ใช่แบบไดนามิกไปยัง div พร้อมความคิดเห็นที่ผู้ใช้เลือกที่จะโพสต์ แต่จะไปที่ความคิดเห็นแรกเสมอ มีความคิดบ้างไหม?   -  person Donalda Donalda    schedule 06.04.2016
comment
ใช่ ฉันคิดว่าคุณกำลังโพสต์คำขอ ajax เมื่อผู้ใช้แสดงความคิดเห็น ความคิดเห็นของผู้ใช้ มันเป็นปุ่มส่งหรือเหตุการณ์ onblur ในการป้อนความคิดเห็นหรือไม่   -  person shivgre    schedule 06.04.2016
comment
หาก ajax ของคุณถูกเรียกใช้โดย onblur (เมื่อผู้ใช้คลิกที่อื่นหลังจากป้อนความคิดเห็น) คุณสามารถใช้ $(this) เพื่อทราบว่ากล่องความคิดเห็นใดถูกป้อน จากนั้นเก็บค่านี้ไว้ในตัวแปร จากนั้นจึงตอบกลับใน ajax ของคุณตามนั้น   -  person shivgre    schedule 06.04.2016
comment
ฉันแก้ไขมันแล้ว! ตรวจสอบมัน   -  person Donalda Donalda    schedule 06.04.2016
comment
โปรดตรวจสอบคำตอบที่โพสต์แล้ว ฉันไม่เห็นช่องความคิดเห็นอื่นใดเลย ยกเว้นช่องที่อยู่ใน div หลักของคุณด้วย class = com   -  person shivgre    schedule 06.04.2016


คำตอบ (1)


ใช้สคริปต์ด้านล่างและแทนที่สคริปต์ที่เกี่ยวข้องของคุณด้วยรหัสนี้ ฉันไม่พบช่องแสดงความคิดเห็นหลายช่องภายใน div ของคุณด้วย class="com" ดังนั้นฉันจึงคิดว่ามันมีอยู่เฉพาะใน div นี้เท่านั้นและไม่ใช่ที่อื่น:

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