我这里有个html列表，当我点击id="M1"时,里面的图片.html("<iframe>")替换一个框架，这个容易，很轻松就能实现。但是我想要是点击第二个时第一个恢复原来的img标签，总之点击别的div后原来的事件恢复,是否能够实现，就像鼠标经过和鼠标离开的那种，只是换为点击，资深的老铁给点思路！！<pre>$('body').on('click','.box',function(e){<pre>var_id=$(this).data('id');<pre>$("#"+_id).html("<iframe><iframe>")<pre>});<pre><pre><divdata-id=="M1"class="box"><imgsrc="01.jpg"alt=""></div><pre><divdata-id=="M2"class="box"><imgsrc="02.jpg"alt=""></div><pre><divdata-id=="M3"class="box"><imgsrc="03.jpg"alt=""></div><pre><divdata-id=="M4"class="box"><imgsrc="04.jpg"alt=""></div><pre><divdata-id=="M5"class="box"><imgsrc="05.jpg"alt=""></div><pre><pre><pre></div> <div class="info clearfix"> <div class="l"><img src="//img1.sycdn.imooc.com/5333a01a0001ee5302000200-100-100.jpg">浮云间</div> <div class="r"><span>浏览 485</span><span>回答 2</span></div> </div> <!--广告位--> </section> <div id="wap_wenda_detail" style="overflow:hidden;line-height:0;margin-bottom:.2rem; max-height:4.26666667rem"> </div> <section> <input type="hidden" id="searchRecommandInput" data-problems="js多次点击事件,关于js的点击事件，希望大神解答一下,如何让jq让一个元素禁止点击,一个click事件执行的动作为完成之前如何阻止再次点击的动作"> <h5>2回答</h5> <dl class="answer-list js-answer-list"> <dd id="484514"> <img src="//img1.sycdn.imooc.com/545845d30001ee8a02200220-100-100.jpg" class="avator"> <p class="name">青春有我</p> <div class="content">首先加载时，用函数保存最初的状态～点击某一个，则他的siblings（）执行恢复最初状态</div> <div class="action clearfix"> <div class="l"> <a href="javascript:void(0);" data-flag="support" class="like js-is-support js-support "><i class="imwap-thumb_up"></i><span class="js-support-num">0</span></a> <a href="javascript:void(0);" data-flag="unsupport" class="like js-is-support js-unsupport "><i class="imwap-thumb_down"></i><span class="js-support-num">0</span></a> </div> <div class="r"><a href="/account/login">0<i class="imwap-comment"></i></a></div> </div> </dd> <dd id="484515"> <img src="//img1.sycdn.imooc.com/545861f00001be3402200220-100-100.jpg" class="avator"> <p class="name">阿晨1998</p> <div class="content">加一个缓存，把之前点击的那个节点保存下来，后续点击时，判断下，如果有缓存，则从缓存中将其节点内容恢复即可：letbufferHtml=''letbuffer=''$('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("")});</div> <div class="action clearfix"> <div class="l"> <a href="javascript:void(0);" data-flag="support" class="like js-is-support js-support "><i class="imwap-thumb_up"></i><span class="js-support-num">0</span></a> <a href="javascript:void(0);" data-flag="unsupport" class="like js-is-support js-unsupport "><i class="imwap-thumb_down"></i><span class="js-support-num">0</span></a> </div> <div class="r"><a href="/account/login">0<i class="imwap-comment"></i></a></div> </div> </dd> </dl> </section> <div class="wenda-more-wrap hide js-wenda-more"> <i class="imwap-zhankai js-more-wenda"></i> <span class="appload-open js-appload-open">打开App，查看更多内容</span> </div> </div> <div class="app-box shadow"> <img class="logo" src="/static/wap/static/common/img/logo-small@2x.png" />随时随地看视频<a id="js-appload" href="javascript:void(0);" class="r js-appload-open"">慕课网APP</a> </div> <div class="relate-box"> <p class="tit">相关分类</p> <dl class="ques-list"> <dt class="clearfix"> <a href="/wenda/17" target="_blank"> <img class="left-img" src="//img1.sycdn.imooc.com/59e96f340001faac02400240.jpg"> JavaScript </a> </dt> </dl> </div> </div> <!-- 唤醒app弹窗 --> <div class="app-box-black" style="display:none"> <div class="app-box-modal"> <div class="app-box-title">继续浏览精彩内容</div> <div class="app-box-mkw"> <div class="app-mkw-logo"></div> <div class="logo-title">慕课网APP</div> <div class="logo-desc">程序员的梦工厂</div> <div class="app-alive-btn js-zhuge-appload js-appload-open" id="js-appload-footer">打开</div> </div> <div class="app-box-webserve"> <img src='' class="webserve-logo"> <div class="webserve-name"></div> <div class="webserve-btn js-go-on">继续</div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var isLogin = false; var wendaID = 526776; window.onload = function() { zhuge.track('ContentPage', { 'Category': '猿问', 'Name': '求高手，js后者jq如何实现点击一个div执行一个事件，再点击别的地方恢复原来的样子！', 'CID': wendaID, 'Price': 0 }); } </script> <script type="text/javascript"> var shareData = { title: "求高手，js后者jq如何实现点击一个div执行一个事件，再点击别的地方恢复原来的样子！", desc: "<pre><pre>我这里有个html列表，当我点击id="M1"时,里面的图片.html("<iframe><iframe>")替换一个框架，这个容易，很轻松就能实现。但是我想要是点击第二个时第一个恢复原来的img标签，总之点击别的div后原来的事件恢复,是否能够实现，就像鼠标经过和鼠标离开的那种，只是换为点击，资深的老铁给点思路！！<pre>$('body').on('click','.box',function(e){<pre>var_id=$(this).data('id');<pre>$("#"+_id).html("<iframe><iframe>")<pre>});<pre><pre><divdata-id=="M1"class="box"><imgsrc="01.jpg"alt=""></div><pre><divdata-id=="M2"class="box"><imgsrc="02.jpg"alt=""></div><pre><divdata-id=="M3"class="box"><imgsrc="03.jpg"alt=""></div><pre><divdata-id=="M4"class="box"><imgsrc="04.jpg"alt=""></div><pre><divdata-id=="M5"class="box"><imgsrc="05.jpg"alt=""></div><pre><pre><pre>", imgUrl: 'https://moco.imooc.com/static/base/images/logo-share.png', otherImgUrl: '', text: '我正在参加@慕课网的课程，很不错哦！快来一起学习吧！', // url: 'https://www.imooc.com' + window.location.pathname + window.location.search url: window.location.href, link: window.location.href } </script> <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!-- 微信分享 --> <script type="text/javascript"> wx.config({ debug: false, appId: 'wxe02b60dcb9fbd01f', timestamp: '1736550730', nonceStr: '(@*IMOOC+==+AK47%#)', signature: '6af5fa6a21ca04c14858ac47d9cb68a97ff2f4b3', jsApiList: 'onMenuShareTimeline,onMenuShareAppMessage,onMenuShareQQ,onMenuShareWeibo'.split(',') }); wx.ready(function() { wx.onMenuShareTimeline(shareData); wx.onMenuShareAppMessage(shareData); wx.onMenuShareQQ(shareData); wx.onMenuShareWeibo(shareData); }); </script> <div style="display:none;"> <!-- 百度统计 --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c92536284537e1806a07ef3e6873f2b3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <script type="text/javascript" src="/static/wap/static/lib/zhugeio/init_455ad6a.js"></script><script type="text/javascript" src="/static/wap/static/common/js/jquery-2.1.0.min_ac9f840.js"></script><script type="text/javascript" src="/static/wap/static/common/js/common_be54bdc.js"></script><script type="text/javascript" src="/static/wap/static/lib/pretty/prettify_cedfcfe.js"></script><script type="text/javascript" src="/static/wap/static/common/js/msg_bed8d10.js"></script><script type="text/javascript" src="/static/wap/static/js/wenda/detail_2708af8.js"></script><script type="text/javascript" src="/static/wap/static/js/course/advertisementReport_6e58a98.js"></script></body> </html>