0
こんにちは、Javascriptを使用してカード内の段落を表示および非表示にするコードを書きました。これは最初のカードで完璧に動作しますが、他のカードでは動作しません。これはあまり難しいことではありませんが、学校のプロジェクトであり、いくつかのルールがあります。 div、class、idは使用できません。意味論的なものでなければならないので、チェックボックスのハックとonclick属性は許可されません。JavascriptはクラスまたはIDを使用せずに複数のボタンで切り替える
これは私のコードです：
var section = document.querySelectorAll('section > summary > p');
var button = document.querySelectorAll('section > summary > button');
var show = function() {
\t 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>これは私のペンへのリンクです： https://codepen.io/SummerD/pen/MEMMNB
私はクラスを使用せずに、この問題への解決策を見ていません。あなたが私を助けることを願っています！この割り当ての性質、およびクリーンHTMLとCSSを使用するクラスの欠如を考えると
'querySelector'は1つの項目を返します。 'querySelectorAll'を使用してください。 – evolutionxbox
私はちょうどこれを試してみたところ、両方とも動作しません@evolutionxbox – Summer
どこで使ったのですか？あなたはそれを使用する方法を理解していますか？ – evolutionxbox