javascript - 如何在点击时显示 ul 元素？

Question

这是我的代码:

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 选择器，但我最终选择了这段代码。问题是它只适用于第一项，当我点击“Liste des articles”时它显示第 1 项，当我点击它时它显示第 2 项，但是当我点击第 2 项时它不显示第 3 项, 它仅通过单击元素 1 显示，对于元素 4 也是如此。

我找不到问题，因为我使用 consol.log 来显示变量，它似乎在变化，但最后它不起作用。

你能帮帮我吗？提前谢谢你:D

Answer 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()
});