我是javascript的初学者，所以我还在学习，但我觉得我的代码太重复了，但我不知道如何改进它，此外，我试图将相同的代码应用于具有相同id或相同类的相同html元素，但每次它只应用于第一个元素时都不起作用(如箭头动画所示(，所以我不得不重复相同的代码并一次又一次地更改类名。
提前感谢那些将帮助我的人。
const projet1 = document.getElementById("projet1");
const projet2 = document.getElementById("projet2");
const projet3 = document.getElementById("projet3");
const prj = document.getElementById("prj");
var arrow = document.querySelectorAll(".arrow-down")[0]
projet1.style.display = "none";
projet2.style.display = "none";
projet3.style.display = "none";
prj1.onclick = function () {
if (projet1.style.display !== "none") {
projet1.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projet1.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
};
prj2.onclick = function () {
if (projet2.style.display !== "none") {
projet2.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projet2.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
};
prj3.onclick = function () {
if (projet3.style.display !== "none") {
projet3.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projet3.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
};.projet-contain{
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238,174,202,0.200) 0%, rgba(148, 188, 233, 0.200) 100%);;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview{
display: flex;
justify-content: space-between;
align-items: center;
}
section >div>div >a {
text-decoration: none;
color: white;
}
.convertigo{
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
body{
background:purple;
}<body>
<section>
<div id="prj1" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet1">
<a>c'est la div 1</a>
</div>
</div>
<div id="prj2" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet2">
<a>c'est la div 2</a>
</div>
</div>
<div id="prj3" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet3">
<a>c'est la div 3</a>
</div>
</div>
</section>
</body>以下是更新后的代码：
添加了class和内联样式：class="项目内容"；style＝"；显示：无">
删除了ID
const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
elm.addEventListener("click",function(){
let projectContent = elm.querySelector(".project-content");
let arrow = elm.querySelector(".arrow-down");
if (projectContent.style.display !== "none") {
projectContent.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projectContent.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
});
});.projet-contain{
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238,174,202,0.200) 0%, rgba(148, 188, 233, 0.200) 100%);;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview{
display: flex;
justify-content: space-between;
align-items: center;
}
section >div>div >a {
text-decoration: none;
color: white;
}
.convertigo{
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
body{
background:purple;
}<body>
<section>
<div class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 1</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 2</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 3</a>
</div>
</div>
</section>
</body>您可以通过使用function和querySelectorAll来改进javascript代码。只有第一个元素的箭头是旋转的，因为您设置了querySelectorAll(".arrow-down")[0]，它只接受第一个元素。
const allProjet = document.querySelectorAll(".projet");
const prj = document.getElementById("prj");
var allArrows = document.querySelectorAll(".arrow-down")
allProjet.forEach(el => el.style.display = "none")
function toggleClass(el, arrow) {
if (el.style.display !== "none") {
el.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
el.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
};
prj1.onclick = () => toggleClass(allProjet[0], allArrows[0])
prj2.onclick = () => toggleClass(allProjet[1], allArrows[1])
prj3.onclick = () => toggleClass(allProjet[2], allArrows[2]).projet-contain{
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238,174,202,0.200) 0%, rgba(148, 188, 233, 0.200) 100%);;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview{
display: flex;
justify-content: space-between;
align-items: center;
}
section >div>div >a {
text-decoration: none;
color: white;
}
.convertigo{
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
body{
background:purple;
}<body>
<section>
<div id="prj1" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet1" class="projet">
<a>c'est la div 1</a>
</div>
</div>
<div id="prj2" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet2" class="projet">
<a>c'est la div 2</a>
</div>
</div>
<div id="prj3" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<svg class="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet3" class="projet">
<a>c'est la div 3</a>
</div>
</div>
</section>
</body>绑定"点击"；事件添加到包含您希望可单击的所有元素的祖先元素。在该示例中，祖先元素是<section>。然后让事件处理程序(当"点击"事件被触发时调用的函数(只作用于您希望在点击时做出反应的元素。在示例中，它是每个.preview。有关更多详细信息，请参阅事件委派。
示例中对详细信息进行了注释
// Reference the <section>
const box = document.querySelector(".box");
// Bind the <section> to the "click" event
box.onclick = function(event) {
// Reference the element the user clicked
const clicked = event.target;
/*
If the element the user clicked isn't <section> AND it has className
.preview...
...reference the element that follows clicked element...
...reference the element within the clicked element with the className
.arrow-down...
...toggle the element that follows clicked element className .hidden...
...toggle the element .arrow-down className .rotate-arrow
*/
if (clicked !== this && clicked.matches(".preview")) {
const content = clicked.nextElementSibling;
const arrow = clicked.querySelector('.arrow-down');
content.classList.toggle('hidden');
arrow.classList.toggle('rotate-arrow');
}
}body {
background: purple;
}
/* Added so .style attribute isn't needed */
.projet {
display: flex;
}
/* Same as previous */
.hidden {
display: none;
}
.projet-contain {
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview {
display: flex;
justify-content: space-between;
align-items: center;
/* Added for UX */
cursor: pointer;
}
section>div>div>b, a {
text-decoration: none;
color: white;
}
b {
/* Added so user click bypasses it */
pointer-events: none;
}
.convertigo {
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%);
/* safari 6.0 - 9.0 */
filter: invert(100%);
/* Added so user click bypasses it */
pointer-events: none;
}
.rotate-arrow {
transform: rotate(180deg);
}<!--All #ids removed and added .box to <section>-->
<body>
<section class="box">
<div class="projet-contain">
<div class="preview">
<!--Changed <a> to <b>-->
<b>Projet Convertigo</b>
<!--Having two class attributes one one element is invalid HTML-->
<!--Fixed by combining values in one class attribute-->
<svg class="arrow-down bi bi-caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="projet hidden">
<a>c'est la div 1</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<b>Projet Convertigo</b>
<svg class="arrow-down bi bi-caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="projet hidden">
<a>c'est la div 2</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<b>Projet Convertigo</b>
<svg class="arrow-down bi bi-caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="projet hidden">
<a>c'est la div 3</a>
</div>
</div>
</section>
</body>