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。

jQuery Flip Effect / getElementById

1 个答案: