Question

我有一个php查询来为表中的每一行回显一个div。但是，我希望将div向上滑动（组成单词），然后当用户单击“阅读更多”按钮时，div向下滑动。但是，由于它是在循环中回显的，因此div具有相同的ID和类，并且id与“阅读更多”按钮一样，仅影响其所在的div，而不会影响其他div。

<?php
 include 'includes/database.php';

 $results = $user->getBlogs();
?>

<html>
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dundalk Healthcare Service</title>

    <!-- Bootstrap core CSS -->


    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/blog.css" rel="stylesheet" type="text/css"/>
    <!-- Custom styles for this template -->
    <link href="css/modern-business.css" rel="stylesheet">

  </head>

  <body>

    <?php
      include 'includes/header.php';
    ?>
    <!-- Page Content -->
    <div class="container">

      <!-- Page Heading/Breadcrumbs -->
      <h1 class="mt-4 mb-3">Our Blog
        <small></small>
      </h1>

<!-- Image Header -->
      <img class="img-fluid rounded mb-4" src="img/blog1.png" alt="">

      <!-- Blog

      <!-- Blog Post -->
      <?php
      foreach ($results as $r) {
        echo "
      <div class='card mb-4'>
        <div class='card-body' >
          <div class='row'>
            <div class='col-lg-6'>
              <a href='#'>
                <img class='img-fluid rounded' src='img/blog2.jpg' alt='cold sore'>
              </a>
            </div>
            <div class='col-lg-6'>
              <h2 class='card-title'>".$r['b_title']."</h2>
              <p class='card-text'>".$r['b_text']."</p>
              <button class='btn btn-primary' id='bb'>Read More</button>
            </div>
          </div>
        </div>
        <div class='card-footer text-muted'>
          Posted on ".$r['b_date']." by
          ".$r['b_poster']."
        </div>
      </div>";
    } ?>

      <!-- Pagination -->
      <ul class="pagination justify-content-center mb-4">
        <li class="page-item">
          <a class="page-link" href="#">&larr; Older</a>
        </li>
        <li class="page-item disabled">
          <a class="page-link" href="#">Newer &rarr;</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /.container -->

  <!-- Footer -->

    <?php
include 'includes/footer.php';
  ?>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>

    $(document).ready(function() {
      var now = new Date();
      var Christmas = new Date("Tuesday 25, 2018");

      if(now < Christmas) // today is before valentine
      {
        alert("Happy Christmas Everyone please keep warm in this weather!");
      }
      else
      {
        alert("Christmas is nearly here, dont forget your flu vaccine!");
      }
    });

    //I want the line <p class='card-text'>".$r['b_text']."</p> to be slidden up, and slide down when the button underneath is clicked, without effecting the other divs echoed from the same loop

    $('#bb').click(function() {
      var div = $(this).parent();
      var text = $('p.card-text').slideToggle();
    });


  </script>

</body>

</html>

Answer 1

首先，ID必须是唯一的，您不能在每张卡中重复id='bb'。将其更改为类。

然后，您需要在同一容器中访问p.card-text：

$(".bb").click(function() {
    var div = $(this).parent();
    div.find("p.card-text").slideToggle();
});

Answer 2

使用$(this).parent()来引用包含按钮的div（假设您的按钮在该特定div内）。

<div class="myDiv">
    <button onclick="expand($(this).parent())">Read More</button>
</div>

在您的脚本中：

function expand(div) { /* Do whatever */ }

在重复的DIV上按一下按钮，以使效果生效？

2 个答案: