javascript - 在有 child 的 div 上使用 insertAfter 会卡住我的浏览器

Question

我有一个正在使用的 JSfiddle here

$('button').click(function () {
  $('.box').removeClass('active');
});

$('#bone').click(function () {
  $('#one').addClass('active');
  $('#one').insertAfter($('#container :last-child'))
});

$('#btwo').click(function () {
  $('#two').addClass('active');
  $('#two').insertAfter($('#container :last-child'))
});

$('#bthree').click(function () {
  $('#three').addClass('active');
  $('#three').insertAfter($('#container :last-child'))
});

我想做的是创建一个图像 slider ，当您在其中选择图像时，它会滑过当前顶部图像的顶部。正如您在 fiddle 中看到的那样，它工作正常。我通过将选定的 div 移动到父 div 的最后一个子元素以使其滑过当前顶部来获得所需的结果。

我的问题是，如果我说在我滑动的其中一个 div 中放置一个段落、另一个 div 或任何子元素，它会卡住我的浏览器。当我移动的 div 也有子元素时，我只能假设将每个 div 移动为最后一个子元素时会感到困惑......虽然我不明白为什么这会破坏代码。看起来我的代码非常直接地告诉它获取包含子元素的 div，并将其移动到子元素列表的末尾。听起来很复杂，但是here's a crude diagram of my problem .

Answer 1

你应该尝试 appendTo 而不是 insertAfter，看看这个:

$('button').click(function () {
  $('.box').removeClass('active');
});

$('#bone').click(function () {
  $('#one').addClass('active');
  $('#one').appendTo($('#container'))
});

$('#btwo').click(function () {
  $('#two').addClass('active');
  $('#two').appendTo($('#container'))
});

$('#bthree').click(function () {
  $('#three').addClass('active');
  $('#three').appendTo($('#container'))
});

@keyframes slide {
  from {left: -100%;}
  to {left: 0%;}
}

#container {
  width: 100px;
  height: 100px;
  position: relative;
  left: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  display: block;
}

#one {
  background-color: red;
}

#two {
  background-color: blue;
}

#three {
  background-color: green;
}

.active {
  animation-name: slide;
  animation-duration: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bone">one</button><button id="btwo">two</button><button id="bthree">three</button>

<div id="container">
  
<div id="one" class="box">
  <p>
  Jagdish
  </p>
</div>
<div id="two" class="box"></div>
<div id="three" class="box"></div>
  
</div>