这是我的代码：
var nbrCliques = 0;
var selecteur = "#art"+nbrCliques;
$('#clique').on('click', function() { $(selecteur).show();});
$(selecteur).on('click', function() { nbrCliques++; selecteur="#art"+nbrCliques; $(selecteur).show(); });.item {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<h1 id="clique">Liste des articles !</h1>
<ul>
<li class="item" id="art0">Article 1</li>
<li class="item" id="art1">Article 2</li>
<li class="item" id="art2">Article 3</li>
<li class="item" id="art3">Article 4</li>
</ul>
</div>
好吧，我要做的是在点击文章N时显示文章N + 1.我以前使用过不同的CSS选择器，但我最终选择了这段代码。问题是它只适用于第一项，当我点击＆＃34; Liste des articles＆＃34;它显示了第1项，当我点击它时它显示第2项，但是当我点击第2项时它没有显示第3项，只有点击第1项才会显示，第4项也是如此。< / p>
我找不到问题，因为我使用consol.log来显示变量并且它似乎在变化，但最后它不起作用。
你可以帮帮我吗？提前谢谢你：D答案 0 :(得分：1)
我认为保留点击次数的全局变量并根据当您只需使用this确定点击了哪个ID时计算，然后在其中添加一个来计算是一个坏主意。
我通过执行$(".item").click()得到文章的所有点击工作，然后我使用字符串拆分来获取文章的编号，接下来我添加了一个ID。最后，我使用新选择器显示该项目。
https://jsfiddle.net/0e6oqymc/
JS :(我没有修改任何html或css）
var nbrCliques = 0;
var selecteur = "#art" + nbrCliques;
$("#clique").click(function() {
//show the first item when they click the <h1>
$("#art0").show();
});
$(".item").click(function() {
//get id number of clicked element as string. for example art0 -> "0"
var thisId = this.id.split("art")[1];
//convert to integer and add one
var newId = parseInt(thisId) + 1;
//build new selector for art(n+1)
var newSelector = "#art" + newId;
//finally show the item using the new selector
$(newSelector).show();
});
请注意，$(".item").click()函数可以简化为此（我只想显示代码正在执行的操作）
$(".item").click( function () {
$("#art" + String(parseInt(this.id.split("art")[1]) + 1)).show()
});
答案 1 :(得分：1)
我添加了data-id =＆＃34; x＆＃34;然后可以通过jQuery检索属性，再加上1来显示下一个项目。
$('#clique').on('click', function() {
$(".item[data-id=1]").show();
});
$('.item').on('click', function() {
$(".item[data-id=" + ($(this).data("id") + 1) + "]").show();
});.item {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<h1 id="clique">Liste des articles !</h1>
<ul>
<li class="item" data-id="1">Article 1</li>
<li class="item" data-id="2">Article 2</li>
<li class="item" data-id="3">Article 3</li>
<li class="item" data-id="4">Article 4</li>
</ul>
</div>
答案 2 :(得分：0)
您可以按如下方式使用next：
$(".item").on('click', function() { $(this).removeClass('item'); $(this).next().show() })
这里我们从元素中删除类item以防止再次选择它，然后显示它的下一个。
现场演示是here
答案 3 :(得分：0)
这就像你想要的那样？
$("ul").hide();
$('#clique').on('click', function() {
$("ul").show();
});
$("li").on('click', function() {
$(this).next().show();
}); .item {
display: none;
}
.item#art0 {
display: inline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<h1 id="clique">Liste des articles !</h1>
<ul>
<li class="item" id="art0">Article 1</li>
<li class="item" id="art1">Article 2</li>
<li class="item" id="art2">Article 3</li>
<li class="item" id="art3">Article 4</li>
</ul>
</div>
答案 4 :(得分：0)
这很有效。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>js</title>
<style type="text/css">
.hide{
display:none;
}
.bold{
font-weight:bold;
}
</style>
</head>
<body>
<div>
<h1 id="clique">Liste des articles !</h1>
<ul>
<li class="item" id="art0">Article 1</li>
<li class="item" id="art1">Article 2</li>
<li class="item" id="art2">Article 3</li>
<li class="item" id="art3">Article 4</li>
</ul>
</div>
<div class="article0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="article1">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="article2">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="article3">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<script>
var doc = document;
doc.addEventListener("DOMContentLoaded", function(event) {
var div = doc.getElementsByTagName('div')[0];
var h1 = doc.getElementById("clique");
var ul = doc.getElementsByTagName('ul');
var li = doc.getElementsByClassName("item");
var art0 = doc.getElementsByClassName("article0")[0];
var art1 = doc.getElementsByClassName("article1")[0];
var art2 = doc.getElementsByClassName("article2")[0];
var art3 = doc.getElementsByClassName("article3")[0];
var articles = [art0,art1,art2,art3];
//hide articles and li's
toggleAllArticles();
toggleAllLi();
h1.addEventListener("click", function(){
toggleAllLi();
hideAllArticles();
});
// add listener to each list item
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", function(){
removeAllLiBold();
hideAllArticles();
this.classList.toggle('bold');
//li[i].classList.toggle('hide');
switch (this.id) {
case 'art0':
art0.classList.toggle('hide');
break;
case 'art1':
art1.classList.toggle('hide');
break;
case 'art2':
art0.classList.toggle('hide');
break;
case 'art3':
art1.classList.toggle('hide');
break;
}
});
}
function toggleAllArticles(){
for (i = 0; i < articles.length; i++) {
articles[i].classList.toggle('hide');
}
}
function hideAllArticles(){
for (i = 0; i < articles.length; i++) {
articles[i].classList.add('hide');
}
}
function toggleAllLi(){
for (var i = 0; i < li.length; i++) {
li[i].classList.toggle('hide');
}
}
function removeAllLiBold(){
for (var i = 0; i < li.length; i++) {
li[i].classList.remove('bold');
}
}
});
</script>
</body>
</html>