javascript - 使用 JavaScript 交换菜单中的图像

Question

第一次在这里发帖，请温柔点。我正在尝试使用 JavaScript 为网站创建菜单。我想单击菜单中的某个项目并交换图像。这部分很简单并且工作正常。我失败的地方是我希望菜单中的先前项目恢复为其原始源图像。如果他们都使用相同的图像，这会很简单，但他们都有自己独特的图像。希望我能很好地解释自己。

Answer 1

您可以使用$.data函数将信息存储在元素中以供以后检索。

在更改图像的 src 之前，您需要存储当前的 src，以便您可以在需要时使用它来恢复 src将其改回来。
示例:

// When a menu item's link is clicked
$('.menu-item a').on('click', function(e) {
  // Prevent the link firing
  e.preventDefault();
  // Grab the menu item
  var self = $(this).parent();

  // find our image
  var img = self.find('img');
  // make sure we're not double changing
  if (!img.hasClass('changed')) {
    // Store our existing src in a the jQuery data
    img.data('original-src', img.attr('src'));
    // Set a new src
    img.attr('src', 'http://lorempixel.com/g/20/20/');
    // Add a class so we know what's changed
    img.addClass('changed');
  }

  // Search for existing changed images
  self.siblings().find('img.changed').each(function() {
    var img = $(this);
    // Remove the changed tag
    img.removeClass('changed');
    // Restore the src
    img.attr('src', img.data('original-src'));
  });

});

#my-menu {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="my-menu">
  <li class="menu-item">
    <a href="#">
      <img src="http://placehold.it/20x20" role="presentation" />
      One
    </a>
  </li>
  <li class="menu-item">
    <a href="#">
      <img src="http://placehold.it/20x20" role="presentation" />
      Two
    </a>
  </li>
  <li class="menu-item">
    <a href="#">
      <img src="http://placehold.it/20x20" role="presentation" />
      Three
    </a>
  </li>
</ol>