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

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

2 个答案: