div中的.load和.unload外部页面

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

Answer 2

为什么不只是在页面加载时加载数据，然后在单击按钮时toggle()显示？

$(function(){
    // add the content right when page loads
    $("#wait").load("about.html");
    $('#more').click(function(){
        // toggle display
        $("#wait").toggle();
        // toggle class
        $(this).toggleClass("less more");
    });
});