Question

我想从数据库中获取数据，并在每个数据库上放置一个多读和少读按钮。但是，只有先阅读更多内容才能正常工作，而其余的则不能。第一个读取更多显示读取的数据，但是当我单击其余的“读取更多”按钮时，它们变为读取较少，但不显示从数据库读取的数据。

注意：如果没有“读取更多”按钮，则可以从数据库中完美地获取所有数据。也就是说，如果我不将display：none放到我的.more类中，则所有数据都会完美显示。

How to make multiple read more buttons in same page using one jquery?

我尝试遵循上面链接中给出的代码示例。

$(document).on("click", ".rm", function() {
		 
     if ($(this).text() == "... Read More") 
     {
	$(this).text("Read Less");
        $(this).parent().children(".more").slideDown();
     } 
     else 
     {
	$(this).text("... Read More");
        $(this).parent().children(".more").slideUp();
     }
		  
    });

.more{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
   <?php 

    $query= "SELECT * FROM doctors ORDER BY doc_id ASC";
    $result = mysqli_query($conn, $query);
    $na = "Not Available";

    while($row = mysqli_fetch_assoc($result)) { ?>
      <div class="col-lg-3 col-sm-6">
	<div class="single-doctor mb-4 mb-lg-0">
			           
	   <div class="content-area">
	     <div class="doctor-name text-center">
	        <h3><?php echo  $row['doc_name']; ?></h3>
	        <h6>Expertise : <?php echo  $row['expertise']; ?></h6>
	     </div>
	     <div class="doctor-text text-center">
	       <p> <b>Qualification: </b><?php if(empty($row['qualification'])) { echo $na;}
		   else echo $row['qualification']; ?><br/>
		   <b>Phone: </b><?php if(empty($row['contact_no'])) { echo $na;}
		   else echo $row['contact_no']; ?><br/>
			                                 
	           <span class="more">
		      <b>Designation: </b><?php if(empty($row['designation'])) { echo $na;}
		      else echo $row['designation']; ?><br/>
		      <b>Organization: </b><?php if(empty($row['organization'])) { echo $na;}
		       else echo $row['organization']; ?><br/>
		       <b>Chamber: </b><?php if(empty($row['chamber'])) { echo $na;}
		        else echo $row['chamber']; ?><br/>
			<b>Location: </b><?php if(empty($row['location'])) { echo $na;}
			else echo $row['location']; ?><br/>
			<b>More: </b><?php if(empty($row['education'])) { echo $na;}
			else echo $row['education']; ?><br/>
			<b>Website: </b><?php if(empty($row['website'])) { echo $na;}
			else echo  $row['website']; ?>
		    </span>

		    <a class="rm">... Read More</a>
		 </p>
	      </div>
	  </div>

       </div>
    </div>
  <?php } ?>
</div>

Answer 1

以示例为例，我采用的方法是使用隐藏div的高度或行数（也可以从中得出高度）或两者的混合，并在您创建基本“锚定”时使用会通过多次“阅读更多”点击而下降，同时还会显示“阅读较少”，点击可能会增加一次或返回顶部。

如何在单个页面中使用php使while循环产生多个读取更多按钮？

1 个答案: