首頁猿問 ...

求高手，js后者jq如何實(shí)現(xiàn)點(diǎn)擊一個div執(zhí)行一個事件，再點(diǎn)擊別的地方恢復(fù)原來的樣子！

JavaScript

慕哥9229398 2019-03-25 10:27:44

我這里有個html列表，當(dāng)我點(diǎn)擊id="M1"時,里面的圖片.html("<iframe ><iframe >")替換一個框架，這個容易，很輕松就能實(shí)現(xiàn)。但是我想要是點(diǎn)擊第二個時第一個恢復(fù)原來的img標(biāo)簽，總之點(diǎn)擊別的div后原來的事件恢復(fù),是否能夠?qū)崿F(xiàn)，就像鼠標(biāo)經(jīng)過和鼠標(biāo)離開的那種，只是換為點(diǎn)擊，資深的老鐵給點(diǎn)思路??！$('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>

查看完整描述

3 回答

一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個贊

首先加載時，用函數(shù)保存最初的狀態(tài)～點(diǎn)擊某一個，則他的siblings（）執(zhí)行恢復(fù)最初狀態(tài)

反對回復(fù) 2019-03-25

忽然笑

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個贊

加一個緩存，把之前點(diǎn)擊的那個節(jié)點(diǎn)保存下來，后續(xù)點(diǎn)擊時，判斷下，如果有緩存，則從緩存中將其節(jié)點(diǎn)內(nèi)容恢復(fù)即可：

    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>")
    });

反對回復(fù) 2019-03-25

慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個贊

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 >")
  });

反對回復(fù) 2019-03-25