通过单击扩展内容(Expanding the content by click it)

通过单击扩展内容(Expanding the content by click it)

当我点击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。

When i click the more. I wanted the content should expand. I my page i have about 10 question with more option. The question content is coming through the php script.

<?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>"; } } ?>

I try to do that by javascript. ContectExpand() fire of when i click.

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

Problem is, $question is changing the value as it is inside the loop. It doesn't have a fixed value.

Also I want to know that I can do that only along with php without javascipt.

最满意答案

对于我的解决方案，你需要某种$ 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>

For my solution you need some sort of $data['id'], which is unique for each question.. I think it cannot be done only in PHP, but you should try to use jQuery, it makes javascript much easier

<?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>