Question

您好我写了一些代码来使用Javascript显示和隐藏卡片中的段落。这在第一张卡上完全正常，但它不适用于任何其他卡。这应该不是很困难，但这是一个学校项目，并且有一些规则。我不能使用div，class或id。它也必须是语义的，因此不允许使用复选框hack和onclick属性。

这是我的代码：

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>

这是我笔的链接： https://codepen.io/SummerD/pen/MEMMNB

如果不使用类，我没有看到任何解决此问题的方法。我希望你能帮助我！

Answer 1

考虑到这个赋值的性质，以及缺少使用干净的HTML和CSS的类，我对于扩展JavaScript有点过分了：

library(pryr)
mem_used() # Note: In example I only have this object in the R memory
28.2 GB

通常，你不会做这种类型的编码，因为它不可维护，难以阅读并依赖于一直可以改变的一致DOM。它会适用于你的例子。

Answer 2

这是一种方法。

＆＃13;

var cards = document.querySelectorAll('section');

cards.forEach((card)=>{
  card.querySelector('button').addEventListener('click', function(){
    card.querySelector('p').classList.toggle('show');
  })
})

＆＃13;

* {
	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;
}

＆＃13;

<!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>

＆＃13;

注意，我是如何通过选择所有卡来添加事件监听器的。

Javascript切换多个按钮而不使用类或ID

2 个答案: