ループでスポイラーコードを使用する方法

Question

ループでスポイラーを使用するとポーズが取れますか？
私はこのような作成を試みるが、何も起こっていないスポイラーをクリックすると、
が失敗する。

foreach ($data as $key=>$value): ?> 
<td style="padding-bottom: 0px;padding-top: 0px; border-top-width: 0px; width: 13%;" align="right"> 
    <div class="spoiler"> 
     <div class="spoiler-toggle">480p<div> 
    </td> 
     <td style="padding-bottom: 0px;padding-top: 0px; border-top-width: 0px; width: 13%;" align="right">720p</td> 
     <td style="padding-bottom: 0px;padding-top: 0px; border-top-width: 0px; width: 13%;" align="right">1080p</td> 

ここでスポイラーのテキストです。

<div class="spoiler-text"> 
<table class="table table-hover"> 
    <tbody style="border-top-width: 0px;"> 
    <tr> 
    <td style="padding-bottom: 0px;padding-top: 0px; border-top-width: 0px;" align="left"> 
    <div class"tes" style="text-decoration: none; font-style: italic;"><u style="border-bottom: 1px dotted #000;text-decoration: none;"><?php echo $value['judul']?></u> - <?php echo $value['episodes'] ?> [480p]</div> 
    </td> 
    <td style="padding-bottom: 0px;padding-top: 0px; border-top-width: 0px;" align="right"> 
    <?php echo html_entity_decode ($value['480p']); ?> 
    </td> 
    </tr> 
    </tbody> 
    </table></div></div><?php endforeach; ?> 

私のjavascriptの

<script> 
      $(function(){ 
    $('.spoiler-text').hide(); 
    $('.spoiler-toggle').click(function(){ 
     $(this).next().toggle(); 
    }); // end spoiler-toggle 
}); // end document ready 
     </script> 

フルスクリプトhttps://github.com/jazuly/ahp/blob/master/spoiler.php

Answer 1

は、このHTMLが有効ではありません。

<td style="padding-bottom: 0px;padding-top: 0px; border-top-width: 0px; width: 13%;" align="right"> 
    <div class="spoiler"> 
     <div class="spoiler-toggle">480p<div> 
    </td> 

また、あなたの$(this).next()は次見つかることはありません。 .spoiler-textは、次の兄弟であるべきです.spoiler-toggle