javascript - .click( swap ) 在给定特定 src 时停止工作？

Question

我有一个下拉菜单，我希望用于显示下拉菜单的图像根据下拉菜单是打开还是关闭来切换...这很好用。但是，当单击页面的其余部分时，我希望图像返回到其原始 src (..images/image1.png)。这也可以正常工作，但是，单击页面后单击图像的 src 不会切换。我该如何解决？谢谢。

$(function() {

  function swap() {
    var mem = this.src;
    this.src = $(this).data('src');
    $(this).data('src', mem);
  }
  $('.dropbtn').click(swap);

});

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
        $(".dropdown-content").slideToggle();
        $(".dropbtn").attr('src', '../images/image1.png');
      }
    }
  }
}

<div class="dropdown">
  <div id="infotoggler">
    <img onclick="myFunction()" src="../images/image1.png" data-src="../images/image2.png" class="dropbtn" />
  </div>
  <div id="myDropdown" class="dropdown-content">
    <a href="http://www.coopertimewell.com">Home</a>
    <a href="http://www.coopertimewell.com/portfolio">Portfolio</a>
    <a href="http://www.coopertimewell.com/contact">Contact</a>
    <a href="http://www.coopertimewell.com/downloads">Downloads</a>
  </div>
</div>

Answer 1

您在此处设置点击时的图像 src，而 swap 应该是这样做的，以这种方式设置它可能会覆盖其他 src，然后 src 和 data-src 将相同。

$(".dropbtn").attr('src', '../images/image1.png');

可能的解决方案是再次交换:

$(".dropdown-content").slideToggle();
var t = $(".dropbtn");
var mem = t.attr('src');
t.attr('src',t.data('src'));
t.data('src', mem);