作成JavaScriptで続きを読むリンクを作成するにはJavaScript

Question

にループ内でより多くのリンクを読んで、私はこの機能を使用しますループ内の各コンテンツに対してそれは上記のように、私はそれをしようとすると、それだけに関係なく、私は上をクリックした1、最初のコメントに影響を与えない

<?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を使用して試してみましたが、それは（私が表示前に私のデータをフォーマットするレンダリング機能を使用して、CodeIgniterの中に、サーバ側の処理ではJQueryのDataTable内でこの機能を実装しようとしている私の問題を解決しません）。私を助けてください。

Answer 1

トグルする各vboxに固有のIDが必要です。ループのインデックスをid属性とjavascriptメソッドに渡すことができます。

あなたのJSやPHP更新します。これを行うには、いくつかの方法があります

​​

と

<?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'); 

あなたは、クリックされた現在の要素に閉じている要素を使用することができます。私は、最も簡単な1ではなく、要素が固定されているのだと思います。

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>

Iは、容器を含むようにマークアップを変更し、また機能に関連する要素を渡すonclickとthisを用います。

Answer 3

受け入れられた回答（itodd's）から借用キューを借用して、完全なコメントの可視性に応じてコメントスニペットの表示を切り替えることができました。スニペットも完全なコメントの一部であるため、これは重要です（別途構造化されていない限り）。だから一般的に、 '完全なコメントを表示する'リンクがクリックされると、スニペットを隠し（完全なコメントを表示するリンクテキストを含む）、完全なコメントを表示します。同様に、「less」リンクがクリックされると、スニペット（「完全なコメントを表示」リンクテキストを含む）が表示され、完全なコメントが非表示になります。まだ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++; } ?>