如何在JavaScript中使用数组切片显示更多内容

Question

我对JavaScript很陌生。我正在尝试使用javascript数组切片制作一个showmore按钮。当用户单击按钮时，我想将目标锁定在下一个3div。每次他点击按钮，下一个3div将对他可见

<button onclick="myFunction()">Show More</button>
<p id="demo">one</p>
<p id="demo" style="display:none;">two</p>
<p id="demo" style="display:none;">three</p>
<p id="demo" style="display:none;">four</p>
<p id="demo" style="display:none;">five</p>
<p id="demo" style="display:none;">six</p>
<p id="demo" style="display:none;">seven</p>
<p id="demo" style="display:none;">eight</p>

JavaScript

function myFunction() {
var slice = [];
slice[0] = document.getElementById("demo");
var citrus = slice[0].slice(0, 3);
citrus.style.display = "block";
}

我想用纯JavaScript做这个。我知道这是一个非常初级的问题，但请帮我做这件事。

Answer 1

拥有多个具有相同id的元素是无效的，请改用类。

有多种方法可以处理这种情况，其中一些方法在其他答案中提到。

这是我认为对您的需求来说是一个很好的解决方案。

样式：

.hide-me {
display: none;
}

Html:

<button id="show-more" onclick="showMore()">Show More</button>
<p>one</p>
<p class="hide-me">two</p>
<p class="hide-me">three</p>
<p class="hide-me">four</p>
<p class="hide-me">five</p>
<p class="hide-me">six</p>
<p class="hide-me">seven</p>
<p class="hide-me">eight</p>

脚本/Javascript：

请记住，我已经使用ES6语法将NodeList转换为Array，所以在使用它之前应该检查浏览器兼容性

function showMore() {
var hiddenPNodes = document.querySelectorAll('.hide-me');
// Keep in mind this is an ES6 syntax so browser compatibility should be checked before using it.
var first3 = Array.from(hiddenPNodes).slice(0, 3);
first3.forEach(element => {
element.classList.remove('hide-me');
});
// Assuming you want to hide the button when all elements are shown.
if (hiddenPNodes.length <= 3) {
hideShowMoreButton();
}
}
function hideShowMoreButton() {
document.getElementById('show-more').classList.add('hide-me');;
}

工作原理：

1. 单击按钮时，它将调用showMore函数

2. 函数将查找类为hide-me的HTML元素。

3. 找到的节点列表将转换为数组以获取前3个元素。

4. 循环遍历元素的最终列表并删除hide-me类。

5. 当你想隐藏"显示更多"按钮时，只需按id获取元素即可然后添加类.hide-me，就像我们从classList

Answer 2

首先，不要使用相同的元素id，而是使用class。我在这里附上了你可以试试的代码。

const moreBtn = document.querySelector('#showmore');
// Index 0 is already displaying so start from 1.
let currentIndex = 1;
moreBtn.addEventListener('click', (e) => {
const demos = [...document.querySelectorAll('.demo')];

for (let i = currentIndex; i < currentIndex + 3; i++) {
if (demos[i]) {
demos[i].style.display = 'block';      
}
}
currentIndex += 3;

// If you display all the elements then hide the show more button
if (currentIndex >= demos.length) {
event.target.style.display = 'none';
}

})

<p class="demo">one</p>
<p class="demo" style="display:none;">two</p>
<p class="demo" style="display:none;">three</p>
<p class="demo" style="display:none;">four</p>
<p class="demo" style="display:none;">five</p>
<p class="demo" style="display:none;">six</p>
<p class="demo" style="display:none;">seven</p>
<p class="demo" style="display:none;">eight</p>
<button id="showmore">Show More</button>

Answer 3

在同一文档中包含多个具有相同ID的元素是无效的。

你可以用CSS做到这一点：有一个元素和它下面的两个兄弟元素是可见的，每当点击按钮时就会递增：

let target = document.querySelector('.target');
const myFunction = () => {
target.className = '';
target = target.nextElementSibling;
target.className = 'target';
};

p {
display: none;
}
.target,
.target + p,
.target + p + p {
display: block;
}

<button onclick="myFunction()">Show More</button>
<p class="target">one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>
<p>eight</p>

如果不能使用样式表：

const ps = [...document.querySelectorAll('p')];
const hide = () => {
for (const p of ps) {
p.style.display = 'none';
}
};
let i = 0;
const myFunction = () => {
hide();
i++;
for (const p of ps.slice(i, i + 3)) {
p.style.display = 'block';
}
};

p {
display: none;
}
.target,
.target + p,
.target + p + p {
display: block;
}

<button onclick="myFunction()">Show More</button>
<p class="target">one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>
<p>eight</p>