Question

Card pile with prev next

<ul id="deck">
    <li class="card"><img src="http://goodlogo.com/images/logos/small/starbucks_coffee_logo_2413.gif" alt="1" /></li>
    <li class="card"><img src="http://i1.wp.com/carlogos.info/wp-content/uploads/2014/01/Volkswagen.gif?resize=100%2C100" alt="2" /></li>
    <li class="card"><img src="http://goodlogo.com/images/logos/small/dell_logo_3529.gif" alt="3" /></li>
    <li class="card"><img src="http://i1.wp.com/carlogos.info/wp-content/uploads/2014/01/BMW.gif?resize=100%2C100" alt="4" /></li>
    <li class="card"><img src="http://i1.wp.com/carlogos.info/wp-content/uploads/2014/01/Mazda.gif?resize=100%2C100" alt="5" /></li>
    <li class="card"><img src="http://i1.wp.com/carlogos.info/wp-content/uploads/2014/01/Saab.gif?resize=100%2C100" alt="6" /></li>
    <li class="card"><img src="http://vignette2.wikia.nocookie.net/lego/images/2/2d/LEGO_logo.jpg/revision/latest?cb=20130601154044" alt="7" /></li>
    <li class="card"><img src="https://g.twimg.com/Twitter_logo_blue.png" alt="8" /></li>
</ul>

<button>Prev</button>
<button>Next</button>

这是一支笔叉，可滑动卡片并在其上单击。我想对其进行编辑，以便可以单击两个按钮“上一个”和“下一个”在卡片之间来回移动。

有人可以帮助我提供代码，如何对其进行编辑并向我解释？任何帮助将不胜感激。

Answer 1

插入方法很少。对于prev，您可以使用Node.insertBefore。第一个参数是要粘贴的元素，第二个参数是要粘贴的元素。因此，您要在第一个元素之前粘贴最后一个元素：

function prev() {
    let parent = document.querySelector("#deck");
    parent.insertBefore(parent.lastElementChild, parent.firstElementChild);
}

对于next，您可以使用Node.appendChild方法，该方法会将元素粘贴为最后一个子元素。因此，您从deck粘贴了第一个子元素，并将它作为最后一个元素附加到了它：

function next() {
    let parent = document.querySelector("#deck");
    parent.appendChild(parent.firstElementChild);
}

或者您可以将insertBefore的第二个参数再次使用null方法。当第二个参数为null时，其作用类似于appendChild，将其作为最后一个子元素插入：

function next() {
    let parent = document.querySelector("#deck");
    parent.insertBefore(parent.firstElementChild, null);
}

mozilla开发者网站上的更多信息 https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

上一张下一张

1 个答案: