jQuery 翻转效果/getElementById

Question

我一直在使用我想用于多个小部件的翻转效果，但我一直在努力解决以下问题：我为不同的小部件使用了相同的基本 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>

对于旋转/翻转效果，我使用 CSS。 提前致谢！

Answer 1

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

给每个单独的小部件一个唯一标识符，并在您的 JavaScript 中创建一个函数，该函数将小部件的 id 作为参数。 front、back、btn-front 和 btn-back应该是类而不是 id。

然后使用getElementById 获取小部件，并使用getElementsByClassName 获取这些类。或使用querySelector。