getelementbyid 更多参数

Question

我正在做一个项目，我需要在 html 页面上 show/hide 几个 pdf。这是显示 pdf 的部分（点击显示和隐藏其他 pdf）

它适用于 2 个 pdf。但是我当时需要隐藏不止一个pdf。例如：

点击：Laplace.pdf 显示，而 Fourier.pdf AND Z.pdf AND integral.pdf 必须隐藏。等等...

我看到它在 <<var hide = document.getElementById('test');>> 但我无法让 getelementbyID 为更多 ID 工作。我试着用 document.querySelectorAll 来实现它，但它不起作用。

这是我的一部分 HTML:

<input type="button" onclick="var id = document.getElementById('test'); var hide = document.getElementById('test2'); if(id.style.display == 'block'){ id.style.display = 'none'; id.style.visibility = 'hidden'; }else{ id.style.display = 'block'; id.style.visibility = 'visible';  hide.style.display = 'none'; hide.style.visibility = 'hidden';}" value="preview pdf" class="button"/>

<embed src="laplace.pdf" style="WIDTH:60%; HEIGHT:500; display:none;  visibility: hidden;" id="test" name="test">

如有帮助将不胜感激。

Answer 1

我已将整个答案更改为使用 jQuery。你必须：

在 pdf (class="pdf") 的所有 embed 元素上添加 class pdf。
在按钮上添加数据属性以包含等效 ID (data-pdf="test" ...)。并删除不需要的 onclick 属性。
当然还要为 class hidden 添加 CSS。

$(function() {
  $("embed.pdf").addClass("hidden");       // on load, hide all pdfs

  $("[data-pdf]").click(function() {       // when clicking an element with the attribute data-pdf (the buttons)
    var id = $(this).data("pdf");          // get the value of that data-pdf attribute (which is the id of the pdf element to show or hide)
    $this = $('#' + id);                   // get the pdf element itself using that id
    if ($this.hasClass("hidden")) {        // if the element is hidden
      $("embed.pdf").addClass("hidden");   // then hide all other pdfs
      $this.removeClass("hidden");         // and show it
    } else {                               // otherwise
      $this.addClass("hidden");            // hide it
    }
  });
});

.hidden {
  display: none;
}

embed {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" data-pdf="test" value="show test" />
<input type="button" data-pdf="other" value="show other" />
<input type="button" data-pdf="something" value="show something" />

<embed src="test.pdf" id="test" name="test" class="pdf">
<embed src="pdf.pdf" id="other" name="other" class="pdf">
<embed src="yet another.pdf" id="something" name="something" class="pdf">

getelementbyid 更多参数

getelementbyid more parameters

javascript

pdf

getelementbyid

selectors-api