如何使用 JQuery 在多个图像之间切换答案

【问题标题】：How do I switch between multiple images with JQuery如何使用 JQuery 在多个图像之间切换
【发布时间】：2015-06-08 07:58:15
【问题描述】：

我正在尝试使用 JQuery 在多个图像之间切换。使用提供的 HTML 执行此操作的最佳方法是什么？

<span class="profit-wrapper">
  <div class="links-wrapper">
    <ul>
      <li><a class="toggle-image"><i class="img-01"></i><span>Image One</span></a></li>
      <li><a class="toggle-image"><i class="img-02"></i><span>Image Two</span></a></li>
      <li><a class="toggle-image"><i class="img-03"></i><span>Image Three</span></a></li>
    </ul>
  </div>
  <img src="image-01.jpg" alt=""  class="data-chart display" id="img-01">
  <img src="image-01.jpg" alt="" class="data-chart" id="img-02">
  <img src="image-01.jpg" alt="" class="data-chart" id="img-03">                              
</span>

我有这个尝试定位一个类和唯一的 id。但是，这似乎很笨拙，因为我需要继续添加和删除，并检查类。

$(function(){  
  $('a.toggle-image').click(function() {
     $('img.data-chart').removeClass('display');
     $(this).addClass('display');
  });
});

【问题讨论】：

到目前为止你尝试了什么？

标签： javascript jquery html

【解决方案1】：

一个解决方案

将 HTML 更改为：

<span class="profit-wrapper">
   <div class="links-wrapper">
     <ul>
       <li>
          <a class="toggle-image" id='img-01-link' href='#'>
              <span>Image One</span>
            </a>
       </li>
       <li><a class="toggle-image" href='#' id='img-02-link'>
           <span>Image Two</span></a>
       </li>
        <li><a class="toggle-image" href='#' id='img-03-link'>
            <span>Image Three</span></a>
        </li>
      </ul>
  </div>
<img src="image-01.jpg" alt="" class="data-chart display" id="img-01">
<img src="image-01.jpg" alt="" class="data-chart" id="img-02">
<img src="image-01.jpg" alt="" class="data-chart" id="img-03">
</span>

并尝试在页面底部添加一个脚本标记，如下所示：

<script>
 var showImage = function () {
   $('.data-chart').hide();
   var id = $(this).attr('id');
   var imageId = '#'+id.slice(0,-5); 
   $(imageId).show();
}

$('.toggle-image').on('click', showImage);
</script>

您需要包含 JQuery 库才能使其工作。

【讨论】：