Блог

Главная - Вопросы по программированию - Я пытаюсь показать единственную ссылку на нажатую кнопку, поэтому, какая кнопка нажата, она покажет ссылку этой кнопки вниз

Я пытаюсь показать единственную ссылку на нажатую кнопку, поэтому, какая кнопка нажата, она покажет ссылку этой кнопки вниз

#javascript #html #jquery #css #flask

Вопрос:

Вот мой код: когда я нажимаю на одну кнопку, она скрывает все ссылки. И также показать на одной кнопке. Ссылки и заголовки-это списки, которые изменяют свою длину в 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>

Комментарии:

1. Идентификаторы должны быть уникальными. id="show" и id="hide" не являются уникальными.

Ответ №1:

В вашем коде есть несколько проблем.

  1. идентификатор должен быть уникальным, поэтому используйте класс вместо идентификатора.
  2. Оберните каждый заголовок и свяжите его с контейнером. В вашем случае переместите div внутрь цикла for.
  3. На основе вашей кнопки нажмите найти свой заголовок и ссылку, чтобы показать / скрыть.
  4. Изначально скройте свой заголовок и ссылку (это зависит от вашей логики, от того, как вы хотите представить пользовательский интерфейс)

Пример:

 $(".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>
Метки: , , ,