HTML変更divコンテンツ

Question

私は闘争をしています。これらの質問の1つではありませんが、それをより良くする方法に似ています。

What im trying to achieve

はまた、私はコード内で混乱することなく、それを行うには、「適切な」または正しいアプローチは何であるNAVの

私の質問をクリックすると、コンテンツに残りをロードします。私はjqueryの

$(document).ready(function(){ 
$('.navelement').click(function(e){ 
    e.preventDefault; 
    $('#content').load($(this).data('url')); 
}); 
$('.navelement:eq(0)').click(); 

をこれまで

<li><a class="navelement" data-url="resources/web/loadit.html" href="#">navbar A</a></li> 

それを行って、使用方法

}）;

私はこのアプローチが好きですが、私はnavbarを変更するたびにajax rest callを実行する必要があります。

私が考えることができる2番目のアプローチは、CSSのdivで表示/非表示にすることです。任意のチップが用意されます。

Answer 1

あなたが提案するのは、最初にコンテンツ内のすべてのHTMLナビゲーションを読み込み、それらを非表示にする（クラスを追加する）、foreachで生成されたdivにカスタムクラスを設定する（例としてnav要素のインデックスを追加する）複数のajaxのロードを防ぎます（1回のみ）。その後、

は、それぞれのNAVをクリックした後ちょうどそれが

見つけてください（NAV 3、NAV2、NAV1）の例で生成されたクラスに参照のうえで、コンテンツのショー怒鳴るスニペットワーキング

$(function() { 
 
    $(".navelement").each(function(index, elm) { 
 
    if ($(elm).data("url")) { 
 
     var navElment = $("<div class='navdiv nav" + index + " hidden'>").load($(elm).data("url")); 
 

 

 

 
     $("#content").append(navElment); 
 

 
     $(elm).on("click", function() { 
 
     $(".navdiv").addClass("hidden"); 
 
     $(".navdiv.nav" + index).removeClass("hidden"); 
 
     }) 
 
    } 
 

 

 
    }) 
 

 

 

 

 
})

.hidden { 
 
    display: none; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a class="navelement" data-url="https://httpbin.org/get?text=navAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" href="#">navbar A</a></li> 
 
    <li><a class="navelement" data-url="https://httpbin.org/get?text=navBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" href="#">navbar B</a></li> 
 
    <li><a class="navelement" data-url="https://httpbin.org/get?text=navCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" href="#">navbar C</a></li> 
 
</ul> 
 
<div id="content"> 
 

 
</div>

Answer 2

どちらのアプローチも正しいですが、divのデータが変更される頻度と、すべてのdivがデータ​​をロードするために必要な帯域幅はどれくらいのものかが決定ポイントになります。

divのデータが頻繁に変更される場合は、アプローチ2を使用すること、つまりすべてのdivを一度読み込み、必要なものを非表示にすることをお勧めします。これにより、ネットワーク上のajaxコールに時間遅延が発生するため、パフォーマンスが向上します。この場合、アプローチ2を使用すると、UIの操作性が向上します。これはeager loadingとも呼ばれます。

重いデータがあり、ユーザーが読み込んだすべてのデータを必要とする必要がない場合は、かなりの帯域幅を消費する可能性のあるすべてのdivを不必要に読み込み、ページの初期読み込みを長くする可能性があります。この場合、アプローチ1が推奨されます。これは遅延読み込みと呼ばれます。