我如何将多个 classList.toggle 应用于相同的 class 或 id 以避免重复？
[英]How do i apply multiple classList.toggle to same class or id to avoid repetition?
问题描述
I'm a beginner in javascript so I'm still learning but I have the impression that my code is too repetitive but I don't know how to improve it, moreover I try to apply the same code to the same html element which have the same id or the same class but it doesn't work every time it applies only to the first element(as you can see with the arrow animation) so i have to repeate the same code and change the class name again and again.
我是 javascript 的初学者，所以我还在学习，但我的印象是我的代码太重复了，但我不知道如何改进它，而且我尝试将相同的代码应用于相同的 html 元素相同的 id 或相同的 class 但每次仅应用于第一个元素时它都不起作用（如箭头动画所示）所以我必须重复相同的代码并一次又一次地更改 class 名称。
Thanks in advance to those who will help me.在此先感谢那些愿意帮助我的人。
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>
3 个解决方案
解决方案1
0 2022-10-08 23:50:26
You can improve javascript code by using function and querySelectorAll .您可以使用function和querySelectorAll改进 javascript 代码。 Only arrow of first element was rotate because you set querySelectorAll(".arrow-down")[0] which take only first element.只有第一个元素的箭头被旋转，因为您设置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>
解决方案2
0 已采纳 2022-10-09 00:02:07
Below is the updated code:以下是更新后的代码：
Added Class and inline-style: class="project-content" style="display:none;"添加了 Class 和内联样式：class="project-content" style="display:none;"
Removed IDs删除的 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>
解决方案3
0 2022-10-09 00:49:38
Bind "click" event to an ancestor element that contains all elements you wish to be clickable.将“点击”事件绑定到包含您希望可点击的所有元素的祖先元素。 In the example the ancestor element is the <section> .在示例中，祖先元素是<section> 。 Then make the event handler (the function called when "click" event is triggered) act only on elements you wish to react when clicked.然后使事件处理程序（触发“单击”事件时调用的 function）仅对您希望在单击时做出反应的元素起作用。 In the example it is each .preview .在示例中，它是每个.preview 。 For more details, see event delegation .有关详细信息，请参阅事件委托。
Details are commented in example详细信息在示例中进行了注释
// 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
"如何在 reactjs 中应用 classList.toggle("active")" - How to apply classList.toggle("active") in reactjs
多个div的classList.toggle（） - classList.toggle() for multiple divs
如何使 classList.toggle 遵循类的 CSS - How to make classList.toggle follow class's CSS
使用 classList.toggle 定位多个类 - Target multiple classes with classList.toggle
Toggle() 或 ClassList.toggle() - Toggle() or ClassList.toggle()
classList.toggle（'class'，true）vs classList.add - classList.toggle('class', true) vs classList.add
似乎无法在循环中应用classList.toggle - Can't seem to apply classList.toggle in a loop
JavaScript将classList.toggle仅应用于onclick元素 - JavaScript apply classList.toggle to only onclick element
“classList.toggle”不适用于 styles，但它是手动应用的 - “classList.toggle” doesn't apply styles, but it gets applied manually
设置classList.toggle的条件 - Setting conditions for classList.toggle
相关标签