Question

这是我的PHP代码，每个帖子都有一个具有相同类的更多按钮。我想要点击帖子A的更多按钮，只显示其下的评论：

 <?php 
  for ($i = 1; $i <= 10; $i++) {
    echo "<div class='col-md-6'>";   
    echo "<div class = 'feeds'>"; ?>
    <form method='post' class='murconform form-horizontal' name='signinform' 
     action =''>
         <?php
         echo "<p>". $post . "</p>";
         echo "<div class = 'murcons btn-group'>";
         echo "<span class = 'likecount'>". $likes . "</span><button class='mlike             pacedown' value='".$assigned_id."' name = 'like' type='submit'><span class = 'buttons'>Like</span><span class='glyphicon glyphicon-heart'></span></button>";

   //Problem 1: I want whenever the next button with the class 'mmore' is clicked, the class
   'comment_data' should be displayed. It is set to "display:none" by default but 
    whenver I click it, all other comment are displayed.

         echo "<button class='mmore pacedown' value='".$post_id."' name = 'more' type='submit'><span class = 'buttons'>More</span><span class='glyphicon glyphicon-chevron-down'></span></button>";
         echo " "."<span class = 'slanted'>". $time . "</div>"; 
     echo "</form>"; 
     // fetch and display comment for each post...
      $qry = "SELECT user_id, comment FROM comments WHERE post_id = ? ORDER BY time DESC";
      $q = $conn->prepare($qry) or die("ERROR: " . implode(":", $conn->errorInfo()));
      $q->bindParam(1, $post_id);
      $q->execute();
      if($commentz = $q->fetchAll()){
      echo "<div class = 'comment_data'>";
      foreach ($commentz as $comment){
      echo "<div class = 'per_comment'>";
         echo "<p>". $comment[0] ." ". $comment[1] . "</p>";
      echo "</div>";
       }
     echo "</div>";
         }?>
      <form method='post' class='murconform form-horizontal' name='signinform' action ='<?php echo htmlentities($_SERVER['PHP_SELF']);?>'>
       <?php
        echo "<div class = 'commentdiv'>";
      echo "<input type='hidden' name='post_id' value='".$post_id."'>";
      echo "<textarea autocomplete = 'off' name='commentdata' maxlength='480' class='commenttext form-control' rows = '1' placeholder='Have your say...'></textarea>";
      echo "<span class='counter_msg'></span>";
      echo "<button class='btn btn-xs btn-primary onespacedown comment' name = 'comment'       type='submit'>Comment</button>";
    // Problem 2: How do I get the content of this textarea whenever the submit button is clicked via AJAX? 

    echo "</form>";
    echo "</div>";
    echo "</div>";
    echo "</div>";
   }
   ?>

这是问题1的jQuery代码：

$( ".comment" ).click(function() {
  var $this=$(this);
  $(".murconform").submit(function(e){
           return false;
       });
     $('.comment_data').slideToggle("slow");

 });

这是问题2的AJAX代码：

$(".mlike").click(function () {
    $(".murconform").submit(function(e){
        return false;
    });
    var $this=$(this);
    var post_id = $('.post_id').val();
    var comment = $(".commentdata").text();
    var request = $.ajax({
      url: "comments.php",
      type: "POST",
      data: { post : post_id , comment : comment },
      dataType: "html"
    });
    request.done(function( msg ) {    
        $this.prev('.comment').html( msg ); 
    });
});

任何好的解决方案/建议（关于最佳实践）都将深表感谢。

Answer 1

很难确定，除非您发布生成的HTML，而不是生成它的代码但似乎您要尝试的是目标组内的元素，而不是那些具有相同类名的组外的元素

为此，您可以找到这些元素的公共父级（例如包装这些元素的div），在您的情况下.feeds似乎每次迭代都会发生一次。

$('.mmore').on('click', function(){
    var $commonparent=$(this).closest('.feeds');

然后在$ commonparent

中找到你想要的元素

    var post_id = $commonparent.find('.post_id').val();
    var comment = $commonparent.find(".commentdata").text();

这可能会解决这两个问题。要获得更好的答案，请发布生成的HTML并将问题解释移到代码之外。

为了澄清，div.feeds可以用作最近的祖先，允许您按类名找到仅存在于该特定div.feeds

内的子元素

<div class="feeds">
    <input class="post_id" />
    <textarea class="commentdata"></textarea>
    <button class="mmore">More</button>
</div>
<div class="feeds">
    <input class="post_id" />
    <textarea class="commentdata"></textarea>
    <button class="mmore">More</button>
</div>
<div class="feeds">
    <input class="post_id" />
    <textarea class="commentdata"></textarea>
    <button class="mmore">More</button>
</div>

如何在JQuery中定位第二个元素

1 个答案: