どのアプローチが結果セットのリストとグリッドビューに適していますか

私はmaterializecssフレームワークを使用して一連の結果を表示しています。私はonchangeイベントとjqueryを使用して結果のリストとグリッドビューを実装しようとしています。私は2つの方法でそれをしました。どんなアプローチが良いか、もっと良い方法があるのかを知りたいだけです。どのアプローチが結果セットのリストとグリッドビューに適していますか

/* List Grid Switcher 
 
$('.list-grid-selector').on('change',function(){ 
 
\t if($(this).val() == "list"){ 
 
\t \t $(".project-list").find(".l3").removeClass('l3').addClass("l6"); 
 
\t \t $(".project-list").find(".m3").removeClass('m3').addClass("m6"); 
 
\t }else{ 
 
\t \t $(".project-list").find(".l6").removeClass('l6').addClass("l3"); 
 
\t \t $(".project-list").find(".m6").removeClass('m6').addClass("m3"); 
 
\t } 
 
}); */ 
 

 
/* List Grid Switcher */ 
 
$('.list-grid-selector').on('change', function() { 
 
    $(".project-list").find(".l3").toggleClass("l6"); 
 
    $(".project-list").find(".m3").toggleClass("m6"); 
 
});

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="input-field"> 
 
    <select class="browser-default list-grid-selector"> 
 
     <option value="grid">Grid View</option> 
 
     <option value="list">List View</option> 
 
    </select> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="project-list"> 
 
     <div class="col l12 m12 s12" style="padding: 0px;"> 
 
     <div class="col s12 m3 l3">first</div> 
 
     <div class="col s12 m3 l3">second</div> 
 
     <div class="col s12 m3 l3">third</div> 
 
     <div class="col s12 m3 l3">fourth</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
</body> 
 

 
</html>

出典

2016-11-21 Baladitya Panda

私はあなたの要求にテンプレートを含めることができますいくつかのプラグインで行くことにあなたをお勧めします。グリッドビューのように別のテンプレートを書くだけで、リストも異なるテンプレートを書く。ユーザーのオンデマンドを含める必要があります。これは、特定のビューに異なる機能を追加する場合に便利です。あなたのコードは管理可能です。

ここにはプラグインのリンクがあります：https://github.com/codepb/jquery-templateこれをチェックして電話をかけてください。

出典

2016-11-21 07:28:48

もっと良い方法で対応していただきありがとうございますが、どちらを使いたかったのか分かりますか？ –

ですので、第1のアプローチでは、l3またはl6クラスを削除し、l6またはl3クラスを追加しています。しかし2番目の方法では、クラスが削除されていないので、いくつかの悪影響が出る可能性があります。だから私はコードが大きいが、読み込みが正しく動作するメソッド1に行くことを好むだろう。 –

どのアプローチが結果セットのリストとグリッドビューに適していますか

答えて

関連する問題