Question

我有一个p元素和一个隐藏的pre元素。我想这样做，当你用（例如）id / class =“p1”点击ap元素时，它会改变pre元素的显示（例如）id / class =“pre1”。

这是我的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

以下是适合您的解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我建议您为点击的任何内容使用按钮元素，以便它可以访问。

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

1 个答案: