求高手，js后者jq如何实现点击一个div执行一个事件，再点击别的地方恢复原来的样子！

Question

我这里有个html列表，当我点击id="M1"时,里面的图片.html("<iframe ><iframe >")替换一个框架，这个容易，很轻松就能实现。
但是我想要是点击 第二个 时 第一个恢复原来的img标签，总之点击别的div后原来的事件恢复,是否能够实现，就像鼠标经过和鼠标离开的那种，只是换为点击，资深的老铁给点思路！！

$('body').on('click', '.box', function(e){             var _id = $(this).data('id');
             $("#"+_id).html("<iframe ><iframe >")
  });

<div data-id=="M1" class="box"><img src="01.jpg" alt=""></div>    
<div data-id=="M2" class="box"><img src="02.jpg" alt=""></div>    
<div data-id=="M3" class="box"><img src="03.jpg" alt=""></div>    
<div data-id=="M4" class="box"><img src="04.jpg" alt=""></div>    
<div data-id=="M5" class="box"><img src="05.jpg" alt=""></div>

Answer 1

加一个缓存，把之前点击的那个节点保存下来，后续点击时，判断下，如果有缓存，则从缓存中将其节点内容恢复即可：&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;bufferHtml&nbsp;=&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;buffer&nbsp;=&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;$('body').on('click',&nbsp;'.box',&nbsp;function(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;_id&nbsp;=&nbsp;$(this).data('id');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(bufferHtml)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffer.innerHTML&nbsp;=&nbsp;bufferHtml &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffer&nbsp;=&nbsp;$(this)[0] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bufferHtml&nbsp;=&nbsp;buffer.innerHTML &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(`[data-id=${_id}]`).html("<iframe></iframe>") &nbsp;&nbsp;&nbsp;&nbsp;});

Answer 2

var&nbsp;src&nbsp;=&nbsp;'',&nbsp;id&nbsp;=&nbsp;null; &nbsp;&nbsp;$('body').on('click',&nbsp;'.box',&nbsp;function&nbsp;(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;_id&nbsp;=&nbsp;$(this).data('id');&nbsp;&nbsp;&nbsp;&nbsp;if(!id){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id&nbsp;=&nbsp;_id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src&nbsp;=&nbsp;$(this).find('img').attr('src'); &nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#"&nbsp;+&nbsp;id).children().remove(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#"&nbsp;+&nbsp;id).append($(`<img&nbsp;src='${src}'&nbsp;/>`)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id&nbsp;=&nbsp;_id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src&nbsp;=&nbsp;$(this).find('img').attr('src'); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$("#"&nbsp;+&nbsp;_id).html("<iframe&nbsp;><iframe&nbsp;>") &nbsp;&nbsp;});