JQuery 弹出窗口重置

Question

抱歉，我对 Javascript 很绝望。我有一个脚本显示一个弹出窗口，然后淡出。但我无法让它重置。目前的代码只能运行一次。

function myFunction$users5() {
  var pop = document.getElementById("myPopup$users5");
  pop.classList.add("show");


  setTimeout(function() {
    $('#myPopup$users5').fadeOut('fast', function() {

      pop.classList.remove("show");
    });
  }, 3000);
}

<div class="popup" onclick="myFunction'.$users5.'()"><img src="unlovesm.png" style="float:right"><span class="popuptext" id="myPopup'.$users5.'">Login to Like.</span></div>

弹出窗口正确显示并淡出，但仅此而已。再次单击 div 不会再次显示弹出窗口。

Answer 1

我不使用 jQuery，但看起来你告诉它淡出你的 div，但永远不会让它再次淡入。处理这个问题的一种方法是使用 jQuery 的 fadeToggle() 并将其与 classList.toggle() 相匹配。

function myFunction$users5() {
  var pop = document.getElementById("myPopup$users5");
  pop.classList.toggle("show");


  setTimeout(function() {
    $('#myPopup$users5').fadeToggle('fast', function() {

      pop.classList.toggle("show");
    });
  }, 3000);
}

<div class="popup" onclick="myFunction'.$users5.'()"><img src="unlovesm.png" style="float:right"><span class="popuptext" id="myPopup'.$users5.'">Login to Like.</span></div>