javascript - 通过单击展开内容

Question

当我点击更多时。我希望内容应该扩展。我的页面上有大约 10 个问题和更多选项。问题内容来自 php 脚本。

<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
    while($data = mysqli_fetch_assoc($result)) {
      $question = $data['question'];
      echo "<span class=\"spanstyle\" id=\"fullquestion\">" . substr($question, 0, 170);
      echo  "...<a href=\"#\" onClick=\"contentExpand();\">more</a></span><br>";
      }
}   
?>

我尝试通过 javascript 来做到这一点。 ContectExpand() 当我点击时触发。

<script>
function contentExpand() {
    var question = <?php echo $question; ?>;
    document.getElementById("content").innerHTML = question;
}
</script>

问题是，$question 正在改变循环内的值。它没有固定值。

另外我想知道我只能在没有 javascipt 的情况下使用 php 来做到这一点。

Answer 1

对于我的解决方案，您需要某种 $data['id']，它对于每个问题都是唯一的。我认为这不能仅在 PHP 中完成，但您应该尝试使用 jQuery，它使 javascript 更容易

<?php
  $result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
  //fetch the data.
  if (mysqli_num_rows($result) > 0) {
      while($data = mysqli_fetch_assoc($result)) {
        $question = $data['question'];
        echo "<span class='spanstyle' id='shortQuestion{$data['id']}'>" . substr($question, 0, 170).
           "...<a href='#' onClick='return contentExpand({$data['id']});'>more</a></span>
  <span class='spanstyle' id='longQuestion{$data['id']}'>{$data['question']}</span>
  <br>";
        }
  }   
  ?>

Javascript

<script>
function contentExpand( fullcontentId ) {
   document.getElementById('shortQuestion'+fullcontentId).style.display = "none";
   document.getElementById('longQuestion'+fullcontentId).style.display = "inline";
   return false;
}
</script>