Javascript jQuery翻转效果/getElementById

我一直在使用翻转效果，我想在多个小部件上使用它，但我一直在努力解决以下问题：我在不同的小部件上使用了相同的基本HTML。因此，当我想翻转页面上的第一个小部件时，我可以正常工作。当我想翻转另一个小部件时，它根本不工作

我注意到问题与我的脚本有关。因为我使用了

document.getElementById

，它只识别第一个唯一的ID。但现在我不想更改每个不同小部件中ID的名称。他们是重写我的脚本的一种方式，这样我就可以在其中定义多个id了吗

HTML

<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-->

每月统计数字
这是前面

每月统计/设置
这是后面

JavaScript

<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>

document.getElementById（'btn front'）.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
document.getElementById（'back'）。className='flip front'；
document.getElementById（'front'）.className='flip-back'；
}，假）；
document.getElementById（'back'）.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
document.getElementById（'back'）。className='flip'；
document.getElementById（'front'）。className='flip'；
}，假）；

对于旋转/翻转效果，我使用CSS。

---

提前感谢

元素的id属性应该是HTML中的唯一标识符。如果一个页面上有多个id属性具有相同的值，则编写的HTML不正确

为每个单独的小部件指定一个唯一标识符，并在JavaScript中创建一个函数，该函数将小部件的id作为参数

front

、

back

、

btn front

和

btn back

应该是类而不是ID

---

然后使用

getElementById

获取小部件，并使用

getElementsByClassName

获取这些类。或者使用

querySelector

首先感谢您的回复。如果我替换

back

ID并使用例如

back-1

，

back-2

，

back-3

，

front-1

，

front-2

，

front-3

。。。作为唯一ID，如何在JavaScript中定义它们？因为

getElementById

只用于一个ID，我想在其中定义更多的ID。（

document.querySelectorAll（）

似乎不适合我。）不要枚举ID，而是将它们设为类。您需要的唯一id是整个小部件（section元素）的唯一标识符。然后您可以使用

getElementById

获取整个小部件，比如说

var widget=document.getElementById（“widget foo”）

，然后使用

widget.getElementsByCassName（“front”）[0]

获取该小部件的前后。在为整个小部件添加id并将现有id更改为类之后，

document.querySelector（“widget foo.front”）

也应该可以工作。