多个按钮只显示按钮的内容 [英] Multiple buttons only showing button's content

问题描述

我正在尝试使用 HTML 按钮，但问题是我似乎无法让它们正确地协同工作.我将代码放入两次，但它仅适用于一个按钮的内容.无论我按下哪个按钮(是的，它确实显示多个按钮)，它只显示其中一个的内容.我的问题是:我必须更改什么才能使按钮彼此独立工作?

这是我使用的代码.
<button title="点击显示/隐藏内容" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler').style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Test</button>

解决方案

id 属性为 HTML 元素指定唯一的 id(该值在 HTML 文档中必须是唯一的).

来源

如果您有 2 个，则需要不同的 ID

这是我使用的代码.
<button title="点击显示/隐藏内容" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler').style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Test</button><div id="spoiler2" style="display:none">这是我使用的代码.2

<button title="点击显示/隐藏内容" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2').style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Test</button>

我还建议为此使用最少使用函数，例如:

function toggleDiv(el) {if (document.getElementById(el).style.display == 'none') {document.getElementById(el).style.display = ''} 别的 {document.getElementById(el).style.display = 'none'}}

这是我使用的代码.
<button title="点击显示/隐藏内容" type="button" onclick="toggleDiv('spoiler')">测试</button><div id="spoiler2" style="display:none">这是我使用的代码.2

<button title="点击显示/隐藏内容" type="button" onclick="toggleDiv('spoiler2')">测试</button>

对于结尾有更漂亮的解决方案，特别是使用 jQuery.

I'm trying to work with HTML Buttons, but the problem is that I can't seem to get them to work together right. I'll put the code in twice, but It only works for one button's content. No matter which button I press (And yes, It does show multiple buttons) it only shows the content of one of them. The question I have is this: What do I have to change to make the buttons work individually of each other?

<div id="spoiler" style="display:none">

This is the code I use.

</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Test</button>

解决方案

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Source

If you have 2 you need different ID's

<div id="spoiler" style="display:none">

  This is the code I use.

</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Test</button>

<div id="spoiler2" style="display:none">

  This is the code I use. 2

</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Test</button>

I also suggest to use a least use a function for this, example:

function toggleDiv(el) {
  if (document.getElementById(el).style.display == 'none') {
    document.getElementById(el).style.display = ''
  } else {
    document.getElementById(el).style.display = 'none'
  }
}

<div id="spoiler" style="display:none">

  This is the code I use.

</div>
<button title="Click to show/hide content" type="button" onclick="toggleDiv('spoiler')">Test</button>

<div id="spoiler2" style="display:none">

  This is the code I use. 2

</div>
<button title="Click to show/hide content" type="button" onclick="toggleDiv('spoiler2')">Test</button>

For ending there are more beautiful solution specially with jQuery.

这篇关于多个按钮只显示按钮的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！