求高手，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

加一个缓存，把之前点击的那个节点保存下来，后续点击时，判断下，如果有缓存，则从缓存中将其节点内容恢复即可：

    let bufferHtml = ''
    let buffer = ''

    $('body').on('click', '.box', function(e) {      let _id = $(this).data('id');      if (bufferHtml) {
        buffer.innerHTML = bufferHtml
      }
      buffer = $(this)[0]
      bufferHtml = buffer.innerHTML

      $(`[data-id=${_id}]`).html("<iframe></iframe>")
    });

Answer 2

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