使用多个按钮切换Java脚本，而无需使用类或ID
[英]Javascript toggle with multiple buttons without using class or id
问题描述
Hi i wrote some code to show and hide a paragraph in a card using Javascript. 
嗨，我编写了一些代码来使用Javascript显示和隐藏卡片中的一段。 This works perfectly fine on the first card, but it doesn't work on any of the other cards. 这在第一张卡上工作得很好，但在其他任何一张卡上均不起作用。 This shouldn't be very difficult, but it's a school project and there are a few rules. 这应该不是很困难，但这是一个学校项目，有一些规则。 I cannot use div, class or id. 我不能使用div，class或id。 It also has to be semantic, so the checkbox hack and the onclick attribute are not allowed. 它也必须是语义的，因此不允许复选框hack和onclick属性。
This is my code: 这是我的代码：
var section = document.querySelectorAll('section > summary > p'); var button = document.querySelectorAll('section > summary > button'); var show = function () { section.classList.toggle('show') } button.addEventListener('click', show());
section summary p { display: none; } section summary p.show { display: block; }
<body> <main> <!--first card--> <section> <!-- Top part--> <span> <img> </span> <!-- Bottom part--> <summary> <button>show paragraph</button> <!--This button triggers the toggle--> <h2></h2> <h3></h3> <p>I'm trying to show and hide this p <a href="#">lees meer</a></p> <footer></footer> </summary> </section> <!--second card--> <section> <!-- Top part--> <span> <img> </span> <!-- Bottom part--> <summary> <button>show paragraph</button> <h2></h2> <h3></h3> <p>I'm trying to show and hide this p <a href="#">lees meer</a></p> <footer></footer> </summary> </section> </main> </body>
This is the link to my pen: https://codepen.io/SummerD/pen/MEMMNB 这是我的笔的链接： https : //codepen.io/SummerD/pen/MEMMNB
I have not seen any solutions to this problem without using classes. 如果不使用类，我还没有看到针对此问题的任何解决方案。 I hope you can help me! 我希望你能帮帮我！
2 个解决方案
解决方案1
1 2017-10-25 12:16:28
Given the nature of this assignment, and the lack of classes to use clean HTML and CSS, I went a bit overboard with stretching the JavaScript: 考虑到这种分配的性质，并且缺少使用干净的HTML和CSS的类，我在扩展JavaScript时有些过分了：
// Collect all buttons, and store them in an Array using querySelectorAll
var buttons = document.querySelectorAll('button')
// Initiate a for loop that 'loops' through all options in the buttons array.
for (var i = 0; i < buttons.length; i++) {
// For every instance of buttons in the Array, apply an event listener (click).
buttons[i].addEventListener('click', function(e) {
// Grab the target of the click event, select their parent and access the 7th child (the <p> tag in question). Access the classList and toggle the 'show' class.
e.target.parentNode.childNodes[7].classList.toggle('show');
});
};
Normally, you wouldn't do this type of coding, since it's unmaintainable, hard to read and relies on a consistent DOM which can always change. 通常，您不会进行这种类型的编码，因为它难以维护，难以阅读并且依赖于始终可以更改的一致DOM。 It will work properly for your example though. 不过，它将适合您的示例。
解决方案2
0 2017-10-25 15:22:40
This is one way to do it. 这是做到这一点的一种方法。
var cards = document.querySelectorAll('section'); cards.forEach((card)=>{ card.querySelector('button').addEventListener('click', function(){ card.querySelector('p').classList.toggle('show'); }) })
* { box-sizing: border-box; font-family: Segoe UI, Myriad, Verdana, sans-serif; } body { background-color: grey; } main { display: flex; flex-flow: row wrap; justify-content: center; } /*================= =====the card==== =================*/ section { width: 15em; margin: 2em; box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.20); background-color: white; max-height: 23em; } /*top part*/ span { display: block; overflow: hidden; position: relative; } span img { width: 120%; } /*bottom part*/ section summary { bottom: 0; background: white; width: 100%; padding: 1em; } section summary h2 { margin: 0; padding-bottom: 0.5em; color: black; font-size: 1.5em; font-weight: 700; } section summary h3 { margin: 0; padding: 0 0 1em; color: darkred; font-size: 1em; font-weight: 400; } /*i'm trying to show/hide this p on click of the button*/ section summary p { color: black; font-size: 0.8em; line-height: 1.8em; display:none; } section summary p.show { display:block; } section summary footer { margin: 2em 0 0; color: black; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Cards</title> </head> <body> <body> <main> <!--first card--> <section> <!-- Top part--> <span> <img src="https://www.w3schools.com/css/img_fjords.jpg"/> </span> <!-- Bottom part--> <summary> <button>show paragraph</button> <h2>Moe</h2> <h3>leeg</h3> <p>De buschauffeur port me wakker. We zijn bij de eindhalte, Centraal Station. Ik stap uit en duw de kinderwagen voort waarin mijn zoon ligt te slapen. Ik wou dat ik hem was. De mensen lopen in zichzelf gekeerd over het plein. De regen doet z'n best mij wakker te houden, maar mijn oogleden voelen zwaar, alsof er een stel verveelde kaboutertjes aan lopen te trekken. <a href="#">lees meer</a> </p> <footer>6 Minuten</footer> </summary> </section> <!--first card--> <section> <!-- Top part--> <span> <img src="https://www.w3schools.com/css/img_fjords.jpg"/> </span> <!-- Bottom part--> <summary> <button>show paragraph</button> <h2>Moe</h2> <h3>leeg</h3> <p>De buschauffeur port me wakker. We zijn bij de eindhalte, Centraal Station. Ik stap uit en duw de kinderwagen voort waarin mijn zoon ligt te slapen. Ik wou dat ik hem was. De mensen lopen in zichzelf gekeerd over het plein. De regen doet z'n best mij wakker te houden, maar mijn oogleden voelen zwaar, alsof er een stel verveelde kaboutertjes aan lopen te trekken. <a href="#">lees meer</a> </p> <footer>6 Minuten</footer> </summary> </section> </main> </body> </body> </html>
Notice, how I added event listener by selecting all the cards. 注意，如何通过选择所有卡添加事件侦听器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.