Question

要在JavaScript中创建更多阅读链接，我使用此功能：

    <script type="text/javascript">
           function toggleContent(v) {
               var vbox = document.getElementById('vbox');
               vbox.style.display = v;
           }
    </script>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<a href="javascript:toggleContent('block')"> read more </a> </p>

<p id="vbox" style="display: none"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<a href="javascript:toggleContent('none')"> less </a> </p>

现在，我想在循环中使用它，以便它对循环中的每个内容都是唯一的。我想将它应用于从数据库表中提取的注释，并像这样使用它：

<?php 
    $posts = $this->db->get_where('posts', array('display' => 'true'))->result_array();     
    foreach ($posts as $p) { ?>
        <p> <?php echo $p['comment_snippet']; ?>
        <a href="javascript:toggleContent('block')"> show full comment </a></p>
        <p id="vbox" style="display: none"> <?php echo $p['comment']; ?>
        <a href="javascript:toggleContent('none')"> less </a> </p>              
        <hr/>
<?php } ?>

当我在上面尝试时，它只影响第一个评论，无论我点击哪一个。我不太了解JavaScript，我已经尝试过阅读JS循环如何工作，但我不知道在这种情况下如何使用它。此外，我希望在点击“显示完整评论”链接时隐藏评论代码段，并在点击“较少”链接时显示评论隐藏和评论代码段。

我尝试过使用this JQuery method，但它并没有解决我的问题（我试图在Code Igniter中使用服务器端处理在JQuery数据表中实现此功能，使用render函数进行格式化显示之前的数据）。请帮我。

Answer 1

您需要为要切换的每个vbox添加唯一ID。您可以将循环的索引传递给id属性和javascript方法。

更新你的JS和PHP：

<script type="text/javascript">
       function toggleContent(id, v) {
           var vbox = document.getElementById(id);
           if (vbox) {
               vbox.style.display = v;
           }
       }
</script>

和

<?php 
    $index = 0;
    $posts = $this->db->get_where('posts', array('display' => 'true'))->result_array();     
    foreach ($posts as $p) { 
        $id = "vbox".$index;
?>
        <p> <?php echo $p['comment_snippet']; ?>
        <a href="javascript:toggleContent('<?php echo $id; ?>', 'block')"> show full comment </a></p>
        <p id="<?php echo $id; ?>" style="display: none"> <?php echo $p['comment']; ?>
        <a href="javascript:toggleContent('<?php echo $id; ?>', 'none')"> less </a> </p>              
        <hr/>
<?php  $index++; } ?>

Answer 2

有几种方法可以做到这一点。我认为最简单的是不修复元素：

var vbox = document.getElementById('vbox');

您可以使用关闭到当前元素的元素。

function toggleContent(el, v) {
  debugger;
  vbox = $(el).closest('.readmore-container').find('.readmorecontent')[0]
  vbox.style.display = v;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="readmore-container">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <a href="#" onclick="javascript:toggleContent(this, 'block')"> read more </a> </p>

  <p id="vbox" style="display: none" class="readmorecontent"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  <a href="#" onclick="javascript:toggleContent(this, 'none')"> less </a> </p>  
</div>

<div class="readmore-container">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <a href="#" onclick="javascript:toggleContent(this, 'block')"> read more </a> </p>

  <p id="vbox" style="display: none" class="readmorecontent"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  <a href="#" onclick="javascript:toggleContent(this, 'none')"> less </a> </p>  
</div>

<div class="readmore-container">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <a href="#" onclick="javascript:toggleContent(this, 'block')"> read more </a> </p>

  <p id="vbox" style="display: none" class="readmorecontent"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  <a href="#" onclick="javascript:toggleContent(this, 'none')"> less </a> </p>  
</div>

我更改了标记以包含容器，并使用onclick和this将相关元素传递给函数。

Answer 3

从接受的答案（itodd）中借用提示，我能够修改代码以根据完整评论的可见性切换评论片段的可见性。这是至关重要的，因为该片段也是完整评论的一部分（除非另有结构）。因此，通常情况下，点击“显示完整评论”链接后，它会隐藏代码段（包括“显示完整评论”链接文字）并显示完整评论。以类似的方式，当点击“较少”链接时，它会显示代码段（包括“显示完整评论”链接文字）并隐藏完整评论。仍然是JavaScript的新手，但itodd的回答非常有见地。我希望有人发现它有用。以下是修改：

<script type="text/javascript">
   function showFullComment(s, h) {
       var comment = document.getElementById(s);
       var snippet = document.getElementById(h);
       if (comment && snippet) {
           comment.style.display = 'block';
           snippet.style.display = 'none';
       }
   }

   function showLessComment(s, h) {
       var comment = document.getElementById(s);
       var snippet = document.getElementById(h);
       if (comment && snippet) {
           comment.style.display = 'none';
           snippet.style.display = 'block';
       }
   }
</script>

<?php 
$index = 1;
$posts = $this->db->get_where('posts', array('display' => 'true'))->result_array();
foreach ($posts as $p) { 
    $s = "comment".$index; 
    $h = "snippet".$index; ?>
    <p id="<?php echo $h; ?>"> <?php echo $p['snippet']; ?><br/>
    <a href="javascript:showFullComment('<?php echo $s; ?>', '<?php echo $h; ?>')"> show full comment </a></p>
    <p id="<?php echo $s; ?>" style="display: none"> <?php echo $p['comment']; ?><br/>
    <a href="javascript:showLessComment('<?php echo $s; ?>', '<?php echo $h; ?>',)"> less </a> </p>              
    <hr/>
<?php  $index++; } ?>

在JavaScript中的循环内创建一个read more链接

3 个答案: