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

Question

我想从数据库中获取数据，并在每个数据上放置一个阅读更多和阅读更少的按钮。然而，只有第一个 read more 工作正常，其余的则不然。第一个 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();
     }
		  
    });

.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 的高度或行数(也可以从中得出高度)或两者的混合，并且基本上创建“ anchor ”正在通过多次“阅读更多”点击下降，同时还显示“阅读较少”，点击一次可以上升或返回顶部。