我试图显示被点击的按钮的唯一链接，所以点击哪个按钮它将显示该按钮的链接答案

【问题标题】：I am trying to show the only link of the button which is clicked, so which button is clicked it will show the link of that button down我试图显示被点击的按钮的唯一链接，所以点击哪个按钮它将显示该按钮的链接
【发布时间】：2021-08-16 09:29:00
【问题描述】：

这是我的代码：当我单击一个按钮时，它会隐藏所有链接。并显示在一个按钮上。链接和标题是在 python 中改变它们的长度的列表。我想显示不是全部点击的唯一按钮的链接。我也尝试过使用 div 但也有同样的问题。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Python Jobs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <section class="hero is-dark is-bold">
  <div class="hero-body">
    <p class="title">
      Job Title
    </p>
    <p class="subtitle">
      Python jobs
    </p>
  </div>
</section>
    <script>
      $(document).ready(function(){
  $("#hide").click(function(){
    $("a").hide();
  });
  $("#show").click(function(){
    $("a").show();
  });
})
    </script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      {% for i in range(0, len-1) %}
        <h3>{{i+1}}. {{title[i]}}</h3>
          <a href={{links[i]}}>{{links[i]}}</a>
          <button id="show">Show</button>
          <button id="hide"> Hide</button>
        <br>
      {% endfor %}
    </div>
  </section>
  </body>
</html>

【问题讨论】：

ID 必须是唯一的。 id="show" 和 id="hide" 不是唯一的。

标签： javascript html jquery css flask

【解决方案1】：

您的代码中存在多个问题。

id 必须是唯一的，所以使用 class 而不是 id。
用容器包装每个标题和链接。在您的情况下，将您的 div 移到 for 循环中。
根据您的按钮单击找到您的标题和链接以显示/隐藏。
最初隐藏您的标题和链接（这取决于您的逻辑，您希望如何呈现 UI）

例子：

$(".hide").click(function() {
  $(this).parent('div').find('a ,h3').hide();
});
$(".show").click(function() {
  $(this).parent('div').find('a ,h3').show();
});

a,
h3 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h3>Title1</h3>
  <a href="link1">Link1</a>
  <button class="show">Show</button>
  <button class="hide"> Hide</button>

</div>

<div class="container">
  <h3>Title2</h3>
  <a href="link1">Link2</a>
  <button class="show">Show</button>
  <button class="hide"> Hide</button>

</div>

【讨论】：