Question

拥有以下代码：

 $("#blogs").mouseover(
    function () {
      $(this).addClass("hover");

      $("#home").removeClass("hover");
      $("#homepages").removeClass("hover");
      $("#apps").removeClass("hover");
      $("#facebook").removeClass("hover");
      $("#kontakt").removeClass("hover");

      $("#content").hide().load("blogs.html", function(){
      $("#content").show("slide"); 

    });  
 });

工作正常，但现在我想只在#content尚未包含blogs.html的情况下调用load（）/ show（）函数。

换句话说：我想检查blogs.html是否已经加载，如果是的话，只是不做任何事情，只有在没有的情况下我才会加载并显示它。

尝试了一些使用hasClass（）和一些if-formula的东西，但很难得到这个检查。

尝试过这样的事情：

$("#content section").hasClass("check_blog").hide().load("blogs.html", function(){
$("#content").show("slide");

基本上我只需要知道如何检查blogs.html是否已经是#content的内容。

非常感谢您的帮助。此致，Andi

Answer 1

为blogs.html中的某个元素添加ID，比如blogsloaded，然后您可以通过以下方式检查它：

if (!$("#blogsloaded").length)
    $("#content").hide().load("blogs.html" ...

如果你已经加载了变量，另一种方法是存储在变量中：

if (!this.blogsloaded)
{
    this.blogsloaded=true;
    $("#content").hide().load("blogs.html" ...
}

Answer 2

我会将鼠标悬停事件分成两个命名空间事件。一个只会运行一次。

// This event will only run once
$("#blogs").on("mouseover.runonce", function () {
    $("#content").load("blogs.html");
});

// because this event will unbind the previous one
$("#blogs").on("mouseover.alwaysrun", function () {
    $(this).off("mouseover.runonce");

    $(this).addClass("hover");

    $("#home").removeClass("hover");
    $("#homepages").removeClass("hover");
    $("#apps").removeClass("hover");
    $("#facebook").removeClass("hover");
    $("#kontakt").removeClass("hover");

    $("#content").hide();
});

Answer 3

更新#content上包含当前加载内容的网址或ID的数据属性。此外，您应该处理用户在上一次加载之前悬停在不同部分上的情况。

var request; // use this same var for all, don't re-declare it
$("#blogs").mouseover(function () {

    // exit event if the blog is the current content in #content
    if ( $("#content").data("current") == "blog") return;

    $("#content").data("current","blog");
    $(this).addClass("hover");
    $("#home").removeClass("hover");
    $("#homepages").removeClass("hover");
    $("#apps").removeClass("hover");
    $("#facebook").removeClass("hover");
    $("#kontakt").removeClass("hover");

    // if a previous request is still pending, abort it
    if ($.isFunction(request.abort) && request.state() == "pending") request.abort();

    // request content
    request = $.get("blogs.html");
    $("#content").hide();

    // when content is done loading, update #content element
    request.done(function(result){
        $("#content").html(result); 
    });
});

我强烈建议不要使用悬停来加载带有ajax的内容。

此外，在目前的形式中，此代码不是非常可重复使用，您必须为每个链接都有一个代码。我建议改为使用类，只有一个事件绑定处理所有链接。

Answer 4

你可以这样做，使用.has()来检测内容的后代

$("#blogs").mouseover(
    function () {
      $(this).addClass("hover");    
      $("#home,#homepages,#apps,#facebook,#kontakt").removeClass("hover");
      var $c = $("#content");
      if($c.has('.check_blog')){ // if content contains an element with that class
          $("#content").hide().load("blogs.html", function(){
          $("#content").show("slide"); 
      }

    });  
 });

Answer 5

你可以这样做：

$("#blogs").mouseover(
 function () {
   $(this).addClass("hover");

   $("#home").removeClass("hover");
   $("#homepages").removeClass("hover");
   $("#apps").removeClass("hover");
   $("#facebook").removeClass("hover");
   $("#kontakt").removeClass("hover");

   if($('#content').html() == '') {
    $("#content").hide().load("blogs.html", function(){
     $("#content").show("slide"); 
    });  
   }
});

如何检查某个html片段是否已加载？

5 个答案: