Question

如果没有，考虑到我可能有很多div，该如何用更少的行来编写代码？

var divs = document.querySelectorAll(".content");
var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

divs[0].addEventListener("click", function(){
    photoes[0].classList.toggle("showImage");
    para[0].classList.toggle("showText");
});
divs[1].addEventListener("click", function(){
    photoes[1].classList.toggle("showImage");
    para[1].classList.toggle("showText");
});
divs[2].addEventListener("click", function(){
    photoes[2].classList.toggle("showImage");
    para[2].classList.toggle("showText");
});

Answer 1

您可以将spread运算符和map函数与参数(item, index)一起使用

var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

[...document.querySelectorAll(".content")].map((item, index)=>{
  item.addEventListener("click", function(){
    photoes[index].classList.toggle("showImage");
    para[index].classList.toggle("showText");
});
}

var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

[...document.querySelectorAll(".content")].map((item, index)=>{
  item.addEventListener("click", function(){
    photoes[index].classList.toggle("showImage");
    para[index].classList.toggle("showText");
});
}

Answer 2

您可以执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header> 
        <div class="container">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li class="dropdown-link"><a href="#">list 1</a>
                        <ul>
                            <li class="dropdown-content"><a href="#">sublist 1</a></li>
                            <li class="dropdown-content"><a href="#">sublist 2</a></li>
                        </ul>
                    </li> 
                    <li class="dropdown-link"><a href="#">list 2</a>
                        <ul>
                            <li class="dropdown-content"><a href="#">sublist 1</a></li>
                            <li class="dropdown-content"><a href="#">sublist 2</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>           
    </header>

    <section>
        <h1> Hello World</h1>
    </section>
</body>
</html>enter code here


body {
    padding: 0;
    margin: 0;
}

/* global */
.container {
    width: 100%;
    float: none;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul li a {
    color: black;
    text-decoration: none;
}


/* header */

header {
    width: 90%;
    margin: auto;
    display: block;
}

header ul li {
    float: left;
    padding: 10px
}

.dropdown-content {
    float: none;
    padding: 5px 0 5px 0;
    display: none;
}

.dropdown-link:hover  .dropdown-content {
    display: block;
}

/* showcase */
.showcase {
    display: block;
}

检查Array.prototype.forEach documentation，以获取有关该方法及其参数的更多信息。

有没有一种方法可以使嵌套循环使用与循环相同的计数器？

2 个答案: