jQuery Flip Effect/getElementById

Question

여러 위젯에 사용하려는 플립 효과를 사용하고 있지만 다음과 같은 문제로 어려움을 겪고 있습니다. 다른 위젯에 동일한 기본 HTML을 사용했습니다. 그래서 내 페이지에서 첫 번째 위젯을 뒤집을 때, 나는 잘 작동합니다. 다른 위젯을 뒤집고 싶을 때, 전혀 작동하지 않습니다 ...

내 스크립팅에 문제가 있음을 확인했습니다. document.getElementById을 사용했기 때문에 첫 번째 고유 ID 만 인식합니다. 하지만 이제 각기 다른 위젯에서 이드의 이름을 변경하고 싶지 않습니다. 그들의 스크립트를 재 작성하여 다중 ID를 정의 할 수 있습니까?

HTML 난 CSS를 사용하는 회전/플립 효과를

<section class="widget span3"> 
    <!--front--> 
    <div id="front" class="widget-1-2 flip"> 
     <div class="widget-header"> 
     <h2>Monthly Statistics</h2> 
     <div class="btn-group pull-right"> 
      <button id="btn-front" class="btn"><i class="icon-cogs icon-white" alt="settings"></i></button> 
      <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button> 
      <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button> 
     </div> 
     </div> 
     <div class="widget-content"><p>This is the front.</p></div> 
    </div><!--/front--> 

    <!--back--> 
    <div id="back" class="widget-1-2 flip"> 
     <div class="widget-header"> 
     <h2>Monthly Statistics/Settings</h2> 
     <div class="btn-group pull-right"> 
      <button id="btn-back" class="btn"><i class="icon-signal icon-white" alt="charts"></i></button> 
      <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button> 
      <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button> 
     </div> 
     </div> 
     <div class="widget-content"><p>This is the back.</p></div> 
    </div><!--/back--> 
</section><!--/widget-1-2--> 

자바 스크립트

<script> 
    document.getElementById('btn-front').addEventListener('click', function(event) { 
     event.preventDefault(); 
     document.getElementById('back').className = 'flip flip-front'; 
     document.getElementById('front').className = 'flip flip-back'; 
    }, false); 

    document.getElementById('back').addEventListener('click', function(event) { 
     event.preventDefault(); 
     document.getElementById('back').className = 'flip'; 
     document.getElementById('front').className = 'flip'; 
    }, false); 
</script> 

. 미리 감사드립니다!

Answer 1

요소의 id 속성은 HTML에서 고유 한 식별자로 간주됩니다. 한 페이지에 동일한 값을 가진 id 속성이 두 개 이상있는 경우 잘못된 HTML을 작성합니다.

각 위젯에 고유 한 식별자를 지정하고 위젯의 ID를 매개 변수로 사용하는 JavaScript에서 함수를 만듭니다. front, back, btn-front 및 btn-back은 ID 대신 클래스 여야합니다.

그런 다음 getElementById으로 위젯을 가져오고 대신 getElementsByClassName을 사용하여 해당 클래스를 가져옵니다. 또는 querySelector을 사용하십시오.