javascript - .load 和 .unload div 内的外部页面

Question

我使用这个 jQuery 函数在单击时加载 div 内的外部页面。

$(document).on("click", ".more", function() {
$("#wait").load("www.google.com")
}),
$(document).on("click",".more",function(){
$("#wait").empty()
})

#wait{
  width:80vw;
  height:80vh;
  position:fixed;
  top:30px;
  left:30px;
  background:red;
 }

#more{cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="more">CLICK</div>
<div id="wait"></div>

它可以工作，但是如果我单击再次显示该 div，它将是空的。
.empty() 的替代方案是什么？

谢谢。

Answer 1

从您的帖子来看，您似乎想加载一次，然后只需切换即可。

$(document).on("click", ".more", function() {
  var $wait = $("#wait");
  if ($wait.html().length==0) $wait.load("about.html");
  $wait.show();
  $(this).toggleClass("more less");
});
$(document).on("click",".less",function(){
  $("#wait").hide();
  $(this).toggleClass("less more");
});

要在每次单击“相同”按钮时添加和删除，请尝试此操作，这似乎与您已经尝试过的非常相似

$(document).on("click", ".more", function() {
  $("#wait").load("about.html");
  $(this).toggleClass("more less");
});
$(document).on("click",".less",function(){
  $("#wait").empty();
  $(this).toggleClass("less more");
});

一个事件处理程序:

$(document).on("click", ".moreorless", function() {
  if ($(this)hasClass("more")) {
    $("#wait").load("about.html");
    $(this).toggleClass("more less");
  }
  else {
    $("#wait").empty();
    $(this).toggleClass("less more");
  }
});