Javascript 在不使用类或 ID 的情况下使用多个按钮切换答案

【问题标题】：Javascript toggle with multiple buttons without using class or idJavascript 在不使用类或 ID 的情况下使用多个按钮切换
【发布时间】：2018-04-06 11:04:06
【问题描述】：

您好，我编写了一些代码来使用 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

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

【问题讨论】：

querySelector 只会返回一项。使用querySelectorAll。
我刚试过这个，现在它们都不起作用@evolutionxbox
你在哪里使用它？你知道怎么用吗？
不，我是 javascript 新手。我已将 'querySelector' 替换为 'querySelectorAll'
好的。没问题。首先，您要选择页面上的所有元素，如果您只想显示与单击的按钮在视觉上相关的元素，这将是一个问题。其次，您需要循环遍历querySelectorAll 结果css-tricks.com/snippets/javascript/…。

标签： javascript html css toggle semantics

【解决方案1】：

鉴于这项任务的性质，以及缺乏使用干净 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');
  });
};

通常，您不会进行这种类型的编码，因为它不可维护、难以阅读并且依赖于始终可以更改的一致 DOM。不过，它适用于您的示例。

【讨论】：

【解决方案2】：

这是一种方法。

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>

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

【讨论】：