单击另一个元素时切换一个元素的显示

Question

我有ap元素和一个隐藏的pre元素。 我要这样做，以便当您单击带有（例如）id / class =“ p1”的ap元素时，它会更改带有（例如）id / class =“ pre1”的pre元素的显示。

这是我的JavaScript代码：

var p = 1;
setInterval(function() {
   if(p <= document.querySelectorAll(".show").length) {
      document.getElementById("display-pre"+p).onclick = function() {
         console.log(p);
         if(document.getElementById("display-pre-a"+p).style.display == '') {
            document.getElementById("display-pre-a"+p).style.display = 'block';
         } else if(document.getElementById("display-pre-a"+p).style.display == 'block') {
            document.getElementById("display-pre-a"+p).style.display = 'none';
         }
      };
      p++;
      if(p > document.querySelectorAll(".show").length) {p = 1;}
   }
}, 100);

这种代码是可行的，但并非如此。 它有时会更改其他元素，有时什么也不做。

这是我的完整JavaScript代码： https : //pastebin.com/wEwdKKLy

这是我的html：

<div id="test-div">
    <input type="text" id="search"/>
    <button type="submit" onclick="query()">Submit</button>
    <button type="submit" onclick="newInput()">New</button>
    <button type="submit" onclick="remove()">Delete</button>
    <button type="submit" onclick="deleteAll()">Delete All</button>
        <div class="query-div"><p class="query-p">Test-a</p></div>
        <div class="query-div"><p class="query-p">Test-b</p></div>
        <div class="query-div"><p class="query-p">Test-ba</p></div>
        <p id="query-show0">TEST-SHOW</p>
<p id="child"></p>
</div>

注意：类“ show”的元素没有显示

我尝试用jquery做到这一点，但是我昨天才开始学习jquery，但是它没有用（我也有同样的问题）。
我尝试过的jQuery代码： https : //pastebin.com/cBisCmEZ

谢谢您的帮助。

Answer 1

这是给您的解决方案

 $("p[data-id]").on("click", function() { var idFound = $(this).data("id"); $("[data-pre='"+ idFound +"']").toggleClass("show"); }); 

 pre { display:none; } .show { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p data-id="p1">This is the paragraph</p> <pre data-pre="p1">This is the pre<pre> 

我建议您对单击的所有内容使用按钮元素，以使其始终可访问。