javascript - 如何在不复制内容的情况下重新运行 JS 调整大小

Question

我有 javascript 代码来计算选取框行中显示的元素数量。我添加了 function resizeElement因为每次调整页面大小时我都需要重新计算它。然而，有了这个功能，<li>每次调整窗口大小时，内容都会重复(如果调整窗口大小时，您可以在代码笔中看到它)。我怎样才能让这个 JS 在每次调整窗口大小时运行而不复制内容？代码笔:https://codepen.io/1818/pen/oKGvoP

function resizeElement() {
window.addEventListener("resize", resizeElement);
resizeElement()

function resizeElement() {
jQuery(document).ready(function() {
const root = document.documentElement;
const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
const marqueeContent = document.querySelector("ul.marquee-content");

root.style.setProperty("--marquee-elements", marqueeContent.children.length);

for(let i=0; i<marqueeElementsDisplayed; i++) {
  marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
}});
}
window.addEventListener("resize", resizeElement);

resizeElement()

:root {
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 0.5s);
}
.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #17171d;
  color: #eee;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: inline-flex; /* added this */
  padding:0; /* added this */
  margin:0; /* added this */
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}

@keyframes scrolling {
  0% { transform: translateX(calc(-100% + var(--marquee-width))); } /* modified this*/
  100% { transform: translateX(0); }
}
.marquee-content li {
  margin:16px;
  flex-shrink: 0;
  width: calc(var(--marquee-element-width) - 32px); /* Modified this */
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  background:#fff;
  border-radius: 10px;
}



/* RESPONSIVE CSS */
@media only screen and (max-width: 767px) {
  :root {
    --marquee-width: 100vw;
    --marquee-height: 100vh;
    --marquee-elements-displayed: 1;
  } }
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  :root {
    --marquee-width: 100vw;
    --marquee-height: 100vh;
    --marquee-elements-displayed: 2;
  } }
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
  :root {
    --marquee-width: 100vw;
    --marquee-height: 100vh;
    --marquee-elements-displayed: 3;
  } }
@media only screen and (min-width: 1440px) and (max-width: 2560px) {
  :root {
    --marquee-width: 100vw;
    --marquee-height: 100vh;
    --marquee-elements-displayed: 4;
  } }
@media only screen and (min-width: 2560px) and (max-width: 9999px) {
  :root {
    --marquee-width: 100vw;
    --marquee-height: 100vh;
    --marquee-elements-displayed: 5;
  } }
.marquee:before, .marquee:after   {
display: none;
}
.marquee-content li, .marquee-content {
will-change: transform, translate;
}
@media only screen and (min-width: 1080px) {
.boxmarquee {
max-height: 333px;
}}

@media only screen and (max-width: 1080px) {
.boxmarquee {
min-height: 224px;
max-height: 224px;
}}

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>
<div class="boxmarquee">
  <div class="marquee">
    <ul class="marquee-content">
      <li class="onefirst"></li>
      <li class="onesecond"></li>
      <li class="onethird"></li>
      <li class="onefourth"></li>
      <li class="onefifth"></li>
      <li class="onesixth"></li>
      <li class="oneseventh"></li>
      <li class="oneeigth"></li>
      <li class="oneninth"></li>
      <li class="onetenth"></li>
      <li class="oneeleventh"></li>
      <li class="onetwelfth"></li>
    </ul>
  </div>
</div>

Answer 1

试试这个:这会有所帮助

    function resizeElement() {
    jQuery(document).ready(function() {
        const root = document.documentElement;
        const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
        console.log(marqueeElementsDisplayed);
        const marqueeContent = document.querySelector("ul.marquee-content");

        root.style.setProperty("--marquee-elements", marqueeContent.children.length);
        marqueeContent.innerHtml = '';
        for(let i=0; i<marqueeElementsDisplayed; i++) {
            marqueeContent.appendChild(marqueeContent.children[i]);
        }
    });
}
window.addEventListener("resize", resizeElement);

resizeElement()

能否请您再解释一下您的要求？