jQuery不适用于数据库中的所有记录

Question

我正在从数据库中检索记录，并且每个记录都有一个阅读更多。

当点击阅读更多时，它应该显示完整的文本，我使用AJAX和jQuery，但问题是，只读取更多只用于第一条记录，问题可能是什么？

我正在从数据库中检索记录，并且每个记录都有一个阅读更多。

当点击阅读更多时，它应该显示完整的文本，我使用AJAX和jQuery，但问题是，只读取更多只用于第一条记录，问题可能是什么？

$(document).ready(function(e){
  $("#readmorenews").click(function(){
    var ID = $("#newsid").val();
    $.ajax({
      type: "POST",
      url: "/icac/displaycontent-ajax.php",
      beforeSend: function() { $('#loadergif1').show(); },
      complete: function() { setTimeout(function() {  
        $("#loadergif1").hide();}, 2000);
      },
      data: 'x='+ ID,
      success: function(data) {
        setTimeout(function() { 
          $("#bcz").hide();
          $("#bczx").hide();
          $("#dispn").html(data);
          var $divsz = $("#dispn");
          $divsz.fadeIn("slow");
        },1500);
      } 
    }); 
  });
});

php

<div id="test1" style="margin:3px;flex: 1;" class="container">
  <h4 style="background-color:#ccc;font-weight:bold;">Latest News </h4>
  <?php
    mysqli_query($con,"set names 'utf8'");
    $query = mysqli_query($con, "SELECT * FROM `icac_content_tbl`,`content_images` WHERE cat_id = '2' AND content_id = cid  GROUP BY `icac_content_tbl`.`time_date` DESC LIMIT 2");        
    $rowCount = mysqli_num_rows($query);

    if($rowCount > 0){ 
        while($row = mysqli_fetch_assoc($query)){ 
            $time_date = $row['time_date'];    
    ?>

<div  style="border-bottom:1px solid #ccc;" class="media">
  <div class="media-left">
    <a href="#">
    <img   class="myImg" style="border:4px solid #ccc;box-shadow:3px 3px 3px #ccc;" class="media-object" width="150" height="120" src="/icac/static-img-news/<?php echo $row['image_name']; ?>" alt="<?php echo $row['image_desc']; ?>">
    </a>
  </div>
  <div style="font-size:13px;font-weight:bold;"  class="media-body">
    <h4  style="color:blue;" class="media-heading"><?php echo $row["content_title"]; ?></h4>
    <?php echo substr($row["content_body"],0,250)."..."; ?>
          <input type="hidden" name="id" id="newsid" value="<?php echo $row['content_id']; ?>"/>
     <br><a id="readmorenews" style="color:black;" href="javascript:void(0)"><font color="#9C9999">Posted on <?php echo  date("d-m-Y h:i a" ,$row["time_date"]+7200); ?> <br>Readmore&raquo;</font></a> 
<div style="display:none;" id="loadergif1"><img  width="40" height="40" src="/icac/static-img-style/giphy.gif"></div>
  </div>

    </div>
     <?php  }  ?>
    <!----------- showmore start ------------>
     <div  style="" class="show_more_mains" id="show_more_mains<?php echo $time_date; ?>">
        <span  style="" id="<?php echo $time_date; ?>" class="show_mores" title="Load more posts">Show more news</span>

  </div>   

      <?php } ?>
    </div>
     <!------------------------------------------    latest news end   ---------------------------------------->


</div>

<div  id="bczx" style="display: flex;" class="jumbotron">
<div  style="margin:3px; width: 52%;border-right:1px solid #ccc;" class="container">
    <h4 style="background-color:#ccc;font-weight:bold;">International Court News</h4>
    </div>

<div  style="margin:3px;flex: 1;" class="container">
    <h4 style="background-color:#ccc;font-weight:bold;">World News </h4>

    </di

V＆GT;      

<div id="dispn"></div>

Answer 1

问题是由于newsid不是唯一的，这就是为什么每次当你点击viewmore链接时你得到相同的id。

这是工作代码。

 $(document).ready(function(e){
    $("a[id^='readmorenews-']").click(function(){
     var i = $(this).attr('data-i');
 var ID = $("#newsid-"+i).val();
      $.ajax({


    type: "POST",
    url: "/icac/displaycontent-ajax.php",
           beforeSend: function() { $('#loadergif1').show(); },
        complete: function() { setTimeout(function() {  $("#loadergif1").hide();}, 2000);},
    data: 'x='+ ID,
    success: function(data) {
setTimeout(function() { 

    $("#bcz").hide();
                 $("#bczx").hide();
    $("#dispn").html(data);
var $divsz = $("#dispn");
$divsz.fadeIn("slow");},


           1500);


    } 


        }); 
});
});

PHP

<div id="test1" style="margin:3px;flex: 1;" class="container">
    <h4 style="background-color:#ccc;font-weight:bold;">Latest News </h4>

<?php


    mysqli_query($con,"set names 'utf8'");

$query = mysqli_query($con, "SELECT * FROM `icac_content_tbl`,`content_images` WHERE cat_id = '2' AND content_id = cid  GROUP BY `icac_content_tbl`.`time_date` DESC LIMIT 2");        
$rowCount = mysqli_num_rows($query);

    if($rowCount > 0){ 
        $i = 0;
        while($row = mysqli_fetch_assoc($query)){ 
            $time_date = $row['time_date'];    
            $i++;
    ?>

<div  style="border-bottom:1px solid #ccc;" class="media">
  <div class="media-left">
    <a href="#">
    <img   class="myImg" style="border:4px solid #ccc;box-shadow:3px 3px 3px #ccc;" class="media-object" width="150" height="120" src="/icac/static-img-news/<?php echo $row['image_name']; ?>" alt="<?php echo $row['image_desc']; ?>">
    </a>
  </div>
  <div style="font-size:13px;font-weight:bold;"  class="media-body">
    <h4  style="color:blue;" class="media-heading"><?php echo $row["content_title"]; ?></h4>
    <?php echo substr($row["content_body"],0,250)."..."; ?>
          <input type="hidden" name="id" id="newsid-<?php echo $i;?>" value="<?php echo $row['content_id']; ?>"/>
     <br><a data-i="<?php echo $i;?>" id="readmorenews-<?php echo $i;?>" style="color:black;" href="javascript:void(0)"><font color="#9C9999">Posted on <?php echo  date("d-m-Y h:i a" ,$row["time_date"]+7200); ?> <br>Readmore&raquo;</font></a> 
<div style="display:none;" id="loadergif1"><img  width="40" height="40" src="/icac/static-img-style/giphy.gif"></div>
  </div>

    </div>
     <?php  }  ?>
    <!----------- showmore start ------------>
     <div  style="" class="show_more_mains" id="show_more_mains<?php echo $time_date; ?>">
        <span  style="" id="<?php echo $time_date; ?>" class="show_mores" title="Load more posts">Show more news</span>

  </div>   

      <?php } ?>
    </div>
     <!------------------------------------------    latest news end   ---------------------------------------->


</div>

<div  id="bczx" style="display: flex;" class="jumbotron">
<div  style="margin:3px; width: 52%;border-right:1px solid #ccc;" class="container">
    <h4 style="background-color:#ccc;font-weight:bold;">International Court News</h4>
    </div>

<div  style="margin:3px;flex: 1;" class="container">
    <h4 style="background-color:#ccc;font-weight:bold;">World News </h4>

    </div>