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

    });  
 });

すべて正常に動作しますが、load（）/ show（）関数は、＃contentにまだblogs.htmlが含まれていない場合にのみ呼び出されるようにしたいと思います。

言い換えると、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、次のコマンドでIDを確認できます。

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

もう1つの方法は、変数を既にロードしている場合は、変数に格納することです。

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

マウスオーバーイベントを2つの名前空間イベントに分割します。1回だけ実行されるもの。

// 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でコンテンツをロードするためにホバーを使用しないことを強くお勧めします。

また、現在の形式では、このコードはあまり再利用できません。リンクごとに1つ必要です。代わりに、クラスを使用し、すべてのリンクを処理するイベントバインディングを1つだけにすることをお勧めします。

于 2012-12-21T21:42:38.067 に答える
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 に答える
-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 に答える