루프에서 눈에 띄지 않는 토글

Question

많은 레코드 (주문)가 포함 된보기에서 눈에 거슬리지 않는 토글 링을 사용하고 있습니다. 개별 div에서 작업하고 있지만 이제는 각 Order가 개별 토글 링크 (링크도 반복 됨)를 사용하여 루프 내에서 개별적으로 확장/축소 될 수 있도록 작동하도록합니다.

내 확장 div를 호출 할 때 문제는 토글 버튼의 ​​모든 반복이 div가 아닌 반복을 반복하는 것입니다. 가장 좋은 방법은 각각의 식별자에 order_id를 사용하는 것입니다. 확장 섹션?

경험 많은 시청자들이 웃을 수 :하지만 난 같은 코드로 장난 시도 : 당신이 볼 수 있듯이 이러한 루프의 각 일부 하위 섹션이 있습니다 내

<% for order in @orders do %> 

# toggle 
<a class="toggle" href="#<%= order.id %>" rel="toggle[<%= order.id %>]">Toggle</a> 

# expandable div with its own nested toggle 
<div id="<%= order.id %>" class="expand_me"> 
    # nested toggle inside the looping expandable div 
    <a class="toggle" href="?" rel="toggle[?]">Toggle</a> 
    <div id="?" class="expand_me"> 
    ... 
    </div> 
</div> 

<% end %> 

것은, 내가 좋아하는 것 뿐만 아니라 전환 할 수 있습니다. 확장 가능한 반복 div 내에서 여러 div를 전환 할 수 있어야하는 경우 솔루션이 어떻게 변경됩니까? 왜냐하면 내가 메인 토글 div를 order.id로 참조하면 다중 내부 div를 참조하는 방법을 알지 못하기 때문입니다. 이것은 주요한 문제에 분명히 따르기 때문입니다.

Answer 1

Jquery와 같은 JavaScript 라이브러리를 살펴 보았습니까? 특수 클래스 나 ID를 추가 할 필요없이이 작업을 수행 할 수 있어야합니다. <a> 링크가 진행 <div>을 토글하는 경우라면 JavaScript를 DOM의 다음 요소로 옮길 수 있습니다.