Question

我正在尝试使用HTML按钮，但问题是我似乎无法使它们正确地协同工作。我会把代码放两次，但它只适用于一个按钮的内容。无论我按哪个按钮（是的，它确实显示多个按钮）它只显示其中一个按钮的内容。我的问题是：我需要更改什么才能使按钮彼此独立工作？

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

Answer 1

id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的。）

Source

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

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

我还建议至少使用一个函数，例如：

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>

为了结束，有更专门的jQuery解决方案。

Answer 2

首先，使用jQuery - 输入比原始js更快，并立即跨浏览器。

其次，不要使用内联JavaScript。它的阅读和故障排除起来要困难得多。 （以下脚本可以直接插入html代码中）

接下来，将您的按钮链接到应通过ID操作的元素，如下所示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        $('#btnSpoiler').click(function(){
            $('#spoiler').toggle();
        });

    });
</script>
<div id="spoiler" style="display:none">
    This is the code I use.
</div>

<button id="btnSpoiler" title="Click to show/hide content">Show</button>

实际上，link可能是错误的词 - ID本身并没有什么特别之处 - 我指的是通过阅读代码，您可以轻松地看到哪个按钮与哪个元素相关。

但是，请注意如何通过ID识别DIV。

jsFiddle Demo

避免内联javascript的原因：

https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting

http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

多个按钮仅显示按钮的内容

2 个答案: