Question

我正在尝试同时切换图像和另一个div。我有它，所以当你点击图像时，图像会切换并显示另一个div，但是当你再次点击时图像不会切换回来。我错过了什么让它切换回来？

$("#swap").click(function() {
  $("#swap-nav").toggle("slow", function() {});
});


$('#swap-img').click(function() {
  this.src = 'i/icon.png';
}, function() {
  this.src = 'i/close.png';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="swap">
  <img id="swap-img" src="i/icon.png" data-swap="i/close.png">
</li>
<div id="swap-nav">
  <li>one</li>
  <li>two</li>
</div>

Answer 1

我会将两者合并为一个事件，如下所示：

＆＃13;

$("#swap").click(function() {
  $("#swap-nav").toggle("slow", function() {});
  var img = $('img[data-swap]',this);
  var temp = img[0].src;
  img[0].src = img.data('swap');
  img.data('swap',temp);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="swap">
  <img src="http://placehold.it/25x25" data-swap="http://placehold.it/25x25/00ff00">
</li>
<div id="swap-nav">
  <li>one</li>
  <li>two</li>
</div>

＆＃13;

Answer 2

也许这可以帮到你！

$('#swap-img').click(function () {
    this.src = (this.src=='i/icon.png')?'i/close.png':'i/icon.png';
});

jQuery切换图像交换和显示隐藏另一个div

2 个答案: