通过单击扩展内容

Question

点击more时。我希望内容应该扩展。我的页面我有大约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 [＆＃39; id＆＃39;]，这对于每个问题都是唯一的..我认为它不能仅在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>

Answer 2

您的代码有几个问题。关于你的问题，最重要的是：

1. while 循环生成多个具有相同 id 的 span 元素。
2. onClick 函数应该包含对您要展开的元素的引用。
3. 您不应包含任何限制 span 元素大小的代码，因此无需展开。

如何修复它们：

修改while循环

创建一个 $ i 变量，该变量计算行并将其添加到 span id ， link id 和javascript函数这样：

$i = 0;
while($data = mysqli_fetch_assoc($result)) {
    $i++;
    $question = $data['question'];
    echo "<span class='spanstyle' id='fullquestion_" . $i. "' >";
    echo  "<a href='#' id='link_" . $i . "' onClick='contentExpand(" . $i. ");'>more</a> ";
    echo $question."</span><br>";
  }

创建一个调整span元素大小的javascript函数：

您没有告诉我们 您希望如何扩展内容。实现它会有很多不同的方法。这只是一个试图尊重你的HTML标记，但肯定不是最好的：

<script>
function contentExpand(id) {
    var link = document.getElementById('link_'+id);
    var span = document.getElementById('fullquestion_'+id);
    if(link.innerHTML=='more')
    {
        link.innerHTML = 'less';
        span.style.width = '100px';
    }else{
        link.innerHTML = 'more';
        span.style.width = 'auto';
    }
}
</script>

修改span元素的css：

像 div 这样的块元素无论如何都会更合适，但也许你有充分的理由使用 span 。

span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

如果没有javascript（只是PHP）怎么做：

这当然是可能的，但我想你不想这样做。

但是如果你还想这样做，那么只使用关于相关 $ question 的部分信息生成循环（正如你在原始代码substr($question, 0, 170)中所做的那样），但是要放置元素在表格内。

当用户点击more span 元素时，请提交表单，以便从客户端向服务器发送有关所选项目的信息。

然后，PHP脚本将再次生成页面，但这次，所选项目将加载问题的全文（$question而不是substr($question, 0, 170)）

因此，您必须进行新的HTTP请求调用（这意味着重新加载页面，如果您不想使用javascript，则AJAX不是一个选项）。

所有这些都增加了一层新的复杂性并降低了效率。 我的建议是，如果你没有充分的理由不使用javascript，请使用它。