fadeToggle対応するdivとdjangoの正規表現

Question

最初にコメントの小さなコンテンツ（id = showmore_とforloopカウンタ）（30語）を表示しています。私はそれを隠し、同じループカウンタのid_content_のすべての内容を表示したいと思います。

HTML：

<div class="comment"> Comments ({{discuss.get_comments|length}}): 
    {% for comment in discuss.get_comments %} 
      <div id="showmore_{{ forloop.counter }}"> 
       {{ comment.commenter.get_full_name }} - {{ comment.body|truncatewords:30 }}... 
           <em>Read More</em> 
      </div> 
      <div id="more_content_{{ forloop.counter }}" style="display: none;"> 
           {{ comment.body }} 
      </div> 
      <div> 
       {% for subcomment in comment.get_subcomments %} 
        <div>{{ subcomment.body|truncatewords:30 }</div> 
       {% endfor %} 
      </div> 
    {% endfor %} 
</div> 

のjQuery：

$(document).ready(function(){ 
    $('div[id^="showmore_"]').click(function(){ 
     $('div[id^="more_content_"]').fadeToggle(); 
    }); 
}); 

私はすべて（例えばshowmoreまたはmore_content）に同じidを与え、すべての要素が非表示または示します。

私は何をしますか？

Answer 1

このコード例では、クリックしたdivをthisで選択しています。次に、正しいid（jQuery sibling関数を使用）を使用して兄弟であることがわかり、それをトグルします。

$(document).ready(function(){ 
 
    $('div[id^="showmore_"]').click(function(){ 
 
     var moreContent = $(this).siblings('div[id^="more_content_"]'); 
 
     moreContent.fadeToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="showmore_1"> 
 
    Show More 1 
 
    </div> 
 
    <div id="more_content_1"> 
 
    Content 1 
 
    </div> 
 
</div> 
 
<div> 
 
    <div id="showmore_2"> 
 
    Show More 2 
 
    </div> 
 
    <div id="more_content_2"> 
 
    Content 2 
 
    </div> 
 
</div>