PROSAGA码农传奇-src-单击时如何更改图像的src并在一段时间后返回原始图像？

<div class =“post-text”itemprop =“text”>
  <P>
    您可以使用简单的数据属性来存储某些状态并交换进出图像源标记。
  </p>
  <P>
    以下是使用JavaScript如何工作的示例：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          function clicked() {
  replace();
  setTimeout(replace, 1000);
}

function replace() {
  var next = document.getElementById("next").getAttribute("data-img-src");
  var current = document.getElementById("next").src;

document.getElementById("next").setAttribute("data-img-src", current);
  document.getElementById("next").src = next;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div id="div1">
  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    如果您需要考虑多次点击并仍然返回原始图片，则需要更多状态并可以尝试：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          function clicked() {
  replace();
  setTimeout(replaceOriginal, 1000);
}

function replace() {
  var next = document.getElementById("next").getAttribute("data-img-src");

document.getElementById("next").src = next;
}

function replaceOriginal(){
  var original = document.getElementById("next").getAttribute("data-img-original");

document.getElementById("next").src = original;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div id="div1">
  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-original="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>