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>

使用JavaScript在菜单中交换图像

1 个答案: