如何在点击时显示ul项目

How to show ul items on click?

本文关键字：显示 ul 项目      更新时间：2023-09-26

这是我的代码：

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相同。

我找不到这个问题，因为我使用了console.log来显示变量，它似乎在更改，但最终不起作用。

你能帮我吗？提前感谢：D

我认为保留一个点击次数的全局变量并根据它进行计算是个坏主意，当你只需要使用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()
});

我添加了数据id="x"属性，然后jQuery可以检索该属性，再加上1来显示下一项。

  • 向项添加了数据id属性
  • 更改了函数$（"#click"）.on（"单击"）
  • 在（"单击"）上添加了$（".item"）

$('#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>

您可以按如下方式使用next：

$(".item").on('click', function() { $(this).removeClass('item'); $(this).next().show() })

在这里，我们从元素中删除类item，以防止再次选择它，然后显示它的下一个。

现场演示是此处

这是你想要的吗？

    $("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>

这很有效。

<!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>

相关文章：