2

我想在页面加载时追加from并调整.item大小。问题在于，对于多个实例，resize 函数会重新迭代以追加几次。.left.right$(window).width() < 479.item

如何更改代码以使其每次仅执行一次.item？

codepen.io/moofawsaw/pen/PoNVejV

function moveDiv() {
  if ($(window).width() < 479) {
    $('.item').appendTo('.right');
  } else {
    $('.item').appendTo('.left');
  }
}
moveDiv();
$(window).resize(moveDiv);
body {
  display: flex;
}

.post {
  display: flex
}

.item {
  height: 100px;
  width: 100px;
  border: 2px solid;
}

.right,
.left {
  min-width: 100px;
  height: 200px;
}

.right {
  background: silver;
}

.left {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
  <div class="right">
    <div class="item"></div>
  </div>
  <div class="left"></div>
</div>
<div class="post">
  <div class="right">
    <div class="item"></div>
  </div>
  <div class="left"></div>
</div>

4

1 回答 1

1

如果我要回答给定的问题，就是这样。

给定代码中的主要问题是$('.item')选择所有现有.item的 s 并尽可能多地克隆它们.right或.left页面上的项目。如果您只有其中一个.right或.left容器，它将完美地工作。

因此，为了解决这个问题，我们不会.item一次选择所有 s，而是.item使用方便的 jQuery 函数.each()分别处理每个

function moveDiv() {
  if ($(window).width() < 479) {
    moveItemInPostTo('.right');
  } else {
    moveItemInPostTo('.left');
  }
}

function moveItemInPostTo(selector) {
  // Instead of working with all .item elements at once,
  // iterate over each one separately
  $('.item').each(function(i, el) {
    // Get parent container, in which we can find
    // both .left and .right elements
    var $post = $(el.closest('.post'));
    // Move the .item to one of them
    $(el).appendTo($post.find(selector));
  })
}

moveDiv();
$(window).resize(moveDiv);
body {
  display: flex;
}

.post {
  display: flex
}

.item {
  height: 100px;
  width: 100px;
  border: 2px solid;
}

.right,
.left {
  min-width: 100px;
  height: 200px;
}

.right {
  background: silver;
}

.left {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
  <div class="right">
    <div class="item"></div>
  </div>
  <div class="left"></div>
</div>
<div class="post">
  <div class="right">
    <div class="item"></div>
  </div>
  <div class="left"></div>
</div>

尽管此代码运行良好，但我真的建议您以非 JavaScript 方式（可能只是 CSS）解决此问题。如果它仍然应该使用 javascript 来完成 - 至少不要使用 jQuery。它并没有真正优化它对互联网流量的压力（几乎 90KB），而且你用 jQuery 做的每一件事都可以使用纯 Javascript 来实现。虽然，必须承认，这对初学者有好处。

我回答了你的问题，但如果你能提供更多关于你想要达到的目标的细节，我可能会给你另一个很好的答案。

于 2020-10-02T13:47:48.297 回答