4

有以下代码：

 $("#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 公式尝试了一些东西，但很难得到这个检查。

试过这样的东西：

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

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

非常感谢您的帮助。问候， 安迪

4

5 回答 5

1

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

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

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

if (!this.blogsloaded)
{
    this.blogsloaded=true;
    $("#content").hide().load("blogs.html" ...
}
于 2012-12-21T21:28:34.507 回答
0

您可以使用.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"); 
      }

    });  
 });
于 2012-12-21T21:45:56.887 回答
0

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

// 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();
});​
于 2012-12-21T21:27:54.237 回答
0

#content更新包含当前加载内容的 url 或 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 的内容。

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

于 2012-12-21T21:42:38.067 回答
-1

你可以这样做：

$("#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"); 
    });  
   }
});
于 2012-12-21T21:37:23.817 回答