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

Posted 2023-03-06

【中文标题】如何在单页中使用 php 从 while 循环中生成多个读取更多按钮？

【英文标题】：How to make multiple read more buttons produced from while loop using php in single page?

【发布时间】：2020-01-10 01:58:41

【问题描述】：

我想从数据库中获取数据并在每个数据上放置一个阅读更多和阅读更少的按钮。然而，只有第一次阅读更多作品正常，其余的则不然。第一个 read more 显示了获取的数据，但是当我单击其余的 read more 按钮时，它们变为 read less 但不显示从数据库中获取的数据。

注意：没有阅读更多按钮，所有数据都是从数据库中完美获取的。即，如果我不将 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();
     
		  
    );

.moredisplay: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>

【参考方案1】：

鉴于示例，我将采用的方法是使用隐藏 div 的高度或行数（也可以从中得出高度）或两者的混合，并基本上像您一样创建“锚点”正在通过多次“阅读更多”点击向下，同时还显示“阅读更少”，可以点击一次向上或返回顶部。