时钟上的javascript按钮

Question

现在我有一个问题，只有第一次点击的按钮在第一次点击按钮后按下其他帖子按钮时才起作用，它只是消失了，没有加载评论，

添加剪切以澄清问题。这是第一次使用此功能。很抱歉出现问题，你能帮我吗。

我使用django作为后台。

var currentItems = 0;

function loadcomments(d) {
var post = d.getAttribute("data-post");
const elementList = document.querySelectorAll('#comment'+post);
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}  
}
currentItems += 2;
if (currentItems >= elementList.length) {
event.target.style.display = 'none';  
}
}

.comment {
display: none;
}

<div class='post'>
<div class='comment' id="comment1">
11
</div>
<div class='comment' id="comment1">
12
</div>
<div class='comment' id="comment1">
13
</div>
<div class='comment' id="comment1">
14
</div>
<div class='comment' id="comment1">
15
</div>
<a class="loadmore" href="javascript:void(0)" 
onclick="loadcomments(this)" data-post="1">Load more</a>
</div>
<div class='post'>
<div class='comment' id="comment2">
21
</div>
<div class='comment' id="comment2">
22
</div>
<div class='comment' id="comment2">
23
</div>

<a class="loadmore" href="javascript:void(0)" 
onclick="loadcomments(this)" data-post="2">Load more</a>

</div>

Answer 1

您需要为每个帖子设置特殊的currentItems变量。

删除全局currentItems变量并尝试

function loadcomments(d) {
var post = d.getAttribute("data-post");
var currentItems = d.getAttribute("data-currentItems") | 0;
const elementList = document.querySelectorAll('#comment'+post);
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}  
}
currentItems += 2;
d.setAttribute("data-currentItems", currentItems);
if (currentItems >= elementList.length) {
event.target.style.display = 'none';  
}
}

Answer 2

正如Teemu所提到的您必须在函数"之外声明并初始化currentItems；。

var currentItems = 0;

function loadcomments(d) {
var post = d.getAttribute("data-post");
const elementList = document.querySelectorAll('#comment'+post);
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}  
}
currentItems += 2;
if (currentItems >= elementList.length) {
event.target.style.display = 'none';  
}
}

div {
display: none;
}

<div id="comment1">
1
</div>
<div id="comment1">
2
</div>
<div id="comment1">
3
</div>
<div id="comment1">
4
</div>
<div id="comment1">
5
</div>
<a class="loadmore" href="javascript:void(0)" onclick="loadcomments(this)" data-post="1">Load more</a>