jQueryを使用するトグルされた要素の適切な条件式

Question

$(document).ready(function() { 

    $(".media").hide(); 

    $(".infobox").click(function(event) { 
     var isVisible = $("."+event.currentTarget.id).is(":visible"); 
     if(isVisible) { 
      $("."+event.currentTarget.id).slideToggle(100); 
     } 
     else { 
      $("."+event.currentTarget.id).slideToggle(100); 
      $("#media"+event.currentTarget.id).load("/mediabox/"+event.currentTarget.id); 
     } 
    }); 
}); 

ユーザーが要素をクリックすると、表示するトグルを切り替えてから、ajaxでいくつかのコンテンツを読み込みます。それはすべて正常に動作します。しかし、もう一度クリックすると、コンテンツを非表示にして再度読み込まないように切り替える必要があります。

現在、Ajaxの表示と非表示を切り替えます。再度クリックすると、ajaxがリロードされ、要素は表示されたままになります。

このjavascript newbのガイダンスは高く評価されます。

Answer 1

カウンタ/ブール値を使用できます。要素が表示されている場合は、counter/booleanの値を確認します。 counter/booleanが元の値と等しい場合は、ajaxをロードして値を変更します。または、ajaxが初めてロードされたときにデータ属性を要素に追加し、その要素が表示されているときにそのデータ属性が存在するかどうかを常に確認できます。存在する場合は、ajaxデータをロードしないでください。

http://codepen.io/partypete25/pen/EKmyNb

if (!$div.data("loaded")) { 
    $div.data("loaded", true); 
    //load ajax data 
    } 

Answer 2

$(function() { 
    var isEverLoadContent = false; 
    $('.media').hide(); 

    // your code above 
    else { 
     if (!isEverLoadContent) { 
      // Perform ajax request 
      // if done set to true 
      isEverLoadContent = true; 
     } 
     // Your next task 
    } 
    // Continue your code 
}); 

Answer 3

私はあなたの要件に応じてイベントを作成するために、視覚的方法を示すために、あなたの問題を再作成。私の例では、divは2番目のクリックで大きくなりますが、他のクリックでは大きくなりません。これをローディングの問題に適用することができます。このプロセスは私がフラグを立てるのが好きなものです。それはあなたが、私は今、AJAXに入るカントので、私はそれをテストしていない

$(document).ready(function(){ 
 
    var happend = false; 
 
    $("div").click(function(event){ 
 
    if($(this).css("background-color") != "rgb(0, 128, 0)"){ 
 
     $(this).css("background-color", "green") 
 
     console.log($(this).css("background-color")) 
 
     // happend = false 
 
    }else{ 
 
     $(this).css("background-color", "blue") 
 
     if(!happend){ 
 
     $(this).animate({"height" : "+=50"}) 
 
     happend = true 
 
     } 
 

 

 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div>button</div>

機能の流れや文を制御できるように設定した変数に関係しています。しかし、私はそれがあなたのために働くか、あなたにいくつかのアイデアを与えるかと思います。あなたのコードがしていることすべてを勉強しなかったので、あなたのためにパターンを調整することができたので、あなたにとってはうまくいかないかもしれません。

$(document).ready(function(){ 
    var happend =false; 
    $(".media").hide(); 

    $(".infobox").click(function(event){ 
     var isVisible = $("."+event.currentTarget.id).is(":visible"); 
     if (isVisible) { 
      $("."+event.currentTarget.id).slideToggle(100); 
     } 
     else { 
      $("."+event.currentTarget.id).slideToggle(100); 
      if(!happend){ 
       $("#media"+event.currentTarget.id).load("/mediabox/"+event.currentTarget.id); 
       happend = true 
      } 

     } 

    }); 

});