Question

我不能为我的生活弄清楚为什么在构建这个地铁网格http://codepen.io/anon/pen/yoxzp之后，如果它已经被扩展，我再也不能点击同一个方格。有人会很好地帮助我吗？

var tile = $('.metro-grid > * ');
tile.on('click', function () {
    tile.not($(this))
        .addClass('fade-out')
        .addClass('hidden');
    $(this).removeClass('hidden')
        .addClass('flip')
        .addClass('exploded-tile');
    tile.not($(this))
        .addClass('hidden');
    $(this).children()
        .data('function', 'exploded_content')
        .removeClass('hidden');
    tile.click(revert);
});

function revert() {
    tile.removeClass('hidden')
        .removeClass('flip')
        .removeClass('exploded-tile')
        .removeClass('fade-out');
    $('[data-function="exploded_content"]').removeClass('shown').addClass('hidden')
}


<header>Click to expand / Click again to close.. But try clicking the same tile after it has been restored to its default state</header>
<div id="main" role="main">
  <article class="metro-grid animated">
    <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become <a href="javascript:alert('!')">dfdfefef</a>
        <img src="http://placehold.it/1550x1550/ffffff" alt="" />
      </div>
    </section>
       <section class="large-tile">
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section class="medium-tile">
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
    <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
    <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
    <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
    <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
    <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>

       <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
       <section class="large-tile">
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section class="medium-tile">
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>
     <section>
      <h1>Tile title</h1>
      <h2>Tile subtitle</h2>
      <div class="hidden" data-function="exploded_content">
        This is additional stuff that will become hidden
      </div>
    </section>

  </article>

<!--  <button onclick="revert()" style="position: fixed; top: 0; z-index: 10;">Revert</button>-->
</div>

<footer>

</footer>

Answer 1

问题是，当你翻转时，你还绑定了一个“恢复”处理程序 -

所以第二次点击它时，它会执行“翻转”和“恢复”。

第三次点击它时，它会执行“翻转”和两次“恢复”。

更好的解决方案 - 根据当前状态处理翻转或恢复即：

.on('click', function(){
    if ($(this).hasClass('flip')) {
       // if already flipped - revert
       revert(); 
       return false;
    }
    // not flipped yet - do the flip!
    // - but don't bind revert handler to click at the end !
    ...

编辑：因为你问过 - 我在这里展示了它是如何按照你的方式完成的 - 但是对于像flip-revert这样的小东西，单个处理程序中的“if”语句更具可读性，更少容易出错等...

要按照您的方式执行此操作，您必须取消绑定以前的点击处理程序，如下所示：

function flip() { 
   // flip code here...
   $(this).off('click.flipper').on('click.flipper', revert);
}
function revert() {
   // revert code here...
   $(this).off('click.flipper').on('click.flipper', flip);
}
$('.metro-grid > *').on('click.flipper',flip);  // click handler with "flipper" event namespace

动画后无法点击元素（我猜对了）

1 个答案: