Question

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

它适用于2 pdf。但我当时需要隐藏多个pdf。例如：

单击

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

我看到的是＆lt;＆lt;＆lt; var hide = document.getElementById('test');＆gt;＆gt;但我不能使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的整个答案。你必须：

在pdfs（pdf）的所有embed元素上添加课程class="pdf"。
在按钮上添加数据属性以包含等效ID（data-pdf="test" ...）。并删除不需要的onclick属性。
当然要为课程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更多参数

1 个答案: