Question

我正在尝试使用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');
  });
});

Answer 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库才能使其正常工作。

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

1 个答案: