使用jQuery单击图像时显示和隐藏相应的列表？答案

【问题标题】：Showing and hiding a corresponding list when clicking on an image with jQuery?使用jQuery单击图像时显示和隐藏相应的列表？
【发布时间】：2021-01-21 18:34:50
【问题描述】：

我试图在单击某个图像时显示和隐藏特定的文本列表。例如：当我单击 5K/10K 事件图像时，5K 的 div id 下的列表仅显示该列表，当我再次单击该图像时，它会隐藏该列表。到目前为止，我能够使列表显示和隐藏，但它显示所有这些而不是特定列表。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>FV Runners</title>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="styles/normalize.css" rel="stylesheet" />
  <link href="styles/my_style.css" rel="stylesheet" />
  <script>
  $(document).ready(function(){
    // Hides the lists on load
    $('h3').hide();
    $('ul').hide();
    
    // Click on a picture to show the corresponding list
    $("img[src='images/run1.jpg']").click(function(){
      $('ul').toggle();
    });
    
  });
  </script>
</head>
<body>
  <div id="header">
    <h1>Fox Valley Runners Club</h1>
  </div> <!-- End of 'header' div-->
  
  <div id="main">
  </div>  <!-- End of 'main' div-->
  
  <div id="pics">
    
    <div class="race_box">
      <img src="images/run1.jpg" /><br />
      <figcaption>5k/10k Events</figcaption>
      
      <div class="races" id="5k">
        <h3>5k/10 Events</h3>
        <ul>
          <li>Mini Sprint</br>10/30/20</br>Memorial Park</br>Appleton</li>
          <li>Iron Horse</br>11/06/20</br>Bay Beach Park</br>Green Bay</li>
          <li>Twilight Trail</br>11/13/20</br>River's Edge Park</br>Wrightstown</li>
        </ul>
      </div><!--  End of '5k' div-->
    </div> <!-- End of 'run1' div-->
    
    <div class="race_box">
      <img src="images/run2.jpg" /><br />
      <figcaption>Half Marathon Events</figcaption>
      
      <div class="races" id="half">
        <h3>Half Marathon Events</h3>
        <ul>
          <li>Fox River Marathon 10/15/20</br>Pierce Park</br>Appleton</li>
          <li>N.E.W. Half Marathon 10/29/20</br>Bay Beach Park</br>Green Bay</li>
          <li>Winnebago Run 11/27/20</br>Menominee Park</br>Oshkosh</li>
        </ul>
      </div> <!-- End of 'half' div-->
    </div><!-- End of 'run2' div-->
    
    <div class="race_box">
      <img src="images/run3.jpg" /><br />
      <figcaption>Full Marathon Events</figcaption>
      
      <div class="races" id="full">
        <h3>Full Marathon Events</h3>
        <ul>
          <li>Cheesehead Marathon 9/24/20</br>Pamperin Park</br>Green Bay</li>
          <li>Chain O'Lakes Marathon 10/29/20</br>Bay Beach Park</br>Green Bay</li>
          <li>Fox Cities Marathon 11/12/20</br>Menominee Park</br>Oshkosh</li>
        </ul>
      </div> <!-- End of 'full' div-->
    </div> <!-- End of 'run3' div-->
    
  </div> <!-- End of 'pics' div-->
  
  
</body>
</html>

感谢您的帮助

【问题讨论】：

标签： html jquery image display

【解决方案1】：

只是我尝试如下。它正在工作，但如果你想特定的 ul 隐藏/显示，你必须给一个名字/id/class。

$("img[src='images/run1.jpg']").click(function(){
   $('ul').toggle();
   $(this).hide();
   var img = $(this).prop('name');
   var div = $(this).parent();
   $(div).prepend('<a class="showImage" data-img-name="'+img+'" href="#">Show Image</a>');
});
        
$(document.body).on('click', '.showImage', function() {
   var img = $(this).data('img-name');
   var selector = 'img[name='+img+']';
   $(selector).show();
   $('ul').hide();
   $(this).remove();
})

<img src="images/run1.jpg" name='img1' />

【讨论】：

【解决方案2】：

您的选择器不正确，$('ul') 将选择所有列表。

您可以将您的 click 处理程序更改为如下所示以获取图像列表：

    $("img").click(function(){
      $(this).siblings('.races').find('ul').toggle();
    });

这将在单击图像时切换图像列表：

解释：

$("img")

将选择所有图像（img 标签）

$(this)

在click 处理程序中，this 关键字将引用点击的图像

.siblings('.races').find('ul')

这将找到与图像元素处于同一深度级别的races 类（带有选择器的nextAll 也足够了）

然后切换图像之后的当前列表的选择元素。

这是一个工作示例：

$(document).ready(function(){
    // Hides the lists on load
    $('h3').hide();
    $('ul').hide();
    
    // Click on a picture to show the corresponding list
    $("img").click(function(){
      $('ul').hide();
      $(this).siblings('.races').find('ul').toggle();
    });
    
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
    <h1>Fox Valley Runners Club</h1>
  </div> <!-- End of 'header' div-->
  
  <div id="main">
  </div>  <!-- End of 'main' div-->
  
  <div id="pics">
    
    <div class="race_box">
      <img src="images/run1.jpg" /><br />
      <figcaption>5k/10k Events</figcaption>
      
      <div class="races" id="5k">
        <h3>5k/10 Events</h3>
        <ul>
          <li>Mini Sprint<br>10/30/20<br>Memorial Park<br>Appleton</li>
          <li>Iron Horse<br>11/06/20<br>Bay Beach Park<br>Green Bay</li>
          <li>Twilight Trail<br>11/13/20<br>River's Edge Park<br>Wrightstown</li>
        </ul>
      </div><!--  End of '5k' div-->
    </div> <!-- End of 'run1' div-->
    
    <div class="race_box">
      <img src="images/run2.jpg" /><br />
      <figcaption>Half Marathon Events</figcaption>
      
      <div class="races" id="half">
        <h3>Half Marathon Events</h3>
        <ul>
          <li>Fox River Marathon 10/15/20<br>Pierce Park<br>Appleton</li>
          <li>N.E.W. Half Marathon 10/29/20<br>Bay Beach Park<br>Green Bay</li>
          <li>Winnebago Run 11/27/20<br>Menominee Park<br>Oshkosh</li>
        </ul>
      </div> <!-- End of 'half' div-->
    </div><!-- End of 'run2' div-->
    
    <div class="race_box">
      <img src="images/run3.jpg" /><br />
      <figcaption>Full Marathon Events</figcaption>
      
      <div class="races" id="full">
        <h3>Full Marathon Events</h3>
        <ul>
          <li>Cheesehead Marathon 9/24/20<br>Pamperin Park<br>Green Bay</li>
          <li>Chain O'Lakes Marathon 10/29/20<br>Bay Beach Park<br>Green Bay</li>
          <li>Fox Cities Marathon 11/12/20<br>Menominee Park<br>Oshkosh</li>
        </ul>
      </div> <!-- End of 'full' div-->
    </div> <!-- End of 'run3' div-->
    
  </div> <!-- End of 'pics' div-->

【讨论】：

这有帮助，谢谢！但现在我正在努力做到这一点，如果一个列表可见并且我让一个新列表可见，那么第一个可见的会消失，而新的会变得可见。
@Tony 更改了 sn-p 以满足您的需要