考虑一下代码:

<div id="block">
  <div id="sub_block">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

  </div>
</div>

<div class="click">Click Me!</div>

我希望每当有人点击“.click”时,父#子#块向下移动2个跨距。
单击1:
<div id="block">
  <span></span>
  <span></span>

  <div id="sub_block">
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

点击2:
<div id="block">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <div id="sub_block">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

等等。当它不再工作或停止时。有什么建议吗?jQuery已接受。

最佳答案

一种可能的方法:

var $subBlock = $('#sub_block'),
    $clicker  = $('.click');

var moveProcessor = function() {
  var $spansToMove = $subBlock.children('span').slice(0, 2);
  if ($spansToMove.length < 2) {
    $clicker.off('click', moveProcessor);
  }
  else {
    $spansToMove.insertBefore($subBlock);
  }
}

$clicker.on('click', moveProcessor);

Demo。其实很简单:每次点击我们都会抓取$subBlock的前两个子块;如果至少有两个子块,我们会将它(带<span>)从这个block的内部移动到外部。如果少于2,我们就关掉这个处理器。
显然,如果存在奇数insertBefore(),则此代码将在子块中保留最后一个。如果不需要,只需将<span>块中的条件更改为if(或仅更改if ($spansToMove.length === 0))。

10-05 20:50
查看更多