DivのJSON値の1つに基づいてdivのdivを非表示にします

Question

JSONのデータの値に基づいてdivを非表示にする選択ドロップダウンリストでJavascriptが機能するように助けが必要です。私はforeachループを使って家具グループを読み込み、.group-containerと呼ばれるdivにそれらを含んでいるページ/ラーベルブレードを持っています。これはすべて、オーダーフォームを$orderFormDataという変数に組み込んだコントローラーを使用して行い、そこからグループと個々の製品をビルドします。

だから、

@foreach ($orderFormData->pgroups as $pgroup) 
<div class="group-container"> 
     <h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name }} - {{ $pgroup->group_code }}</h3> 
     <p class="uk-text-muted" style="font-size: 20px;" >{!! html_entity_decode($pgroup->group_desc) !!}</p> <!--Group Description--> 

      @foreach ($pgroup->pskus as $psku) 

      //table of rows for info 

        @endforeach 
        </tbody> 
       </table> 
      </div> 

     </div> 
@endforeach 

、私は私のドロップダウンで2つの値は、それが依存して、1または0の特定の値を持つ場合.group-containerを表示/非表示にする：ここで

は、あなたのアイデアを持っているので、メインの基本的な構造です選択に。

ドロップダウンにはpopularity and recently orderedのオプションがあります。したがって、ユーザーが人気を選択した場合、pgroups->topsellerにマップする必要があり、値1の場合はそれを表示し、値0の場合は非表示にします。最近注文したのと同じですが、$pgroups->reorderにマップします。私はそれをダンプするときここ

は$orderFormDataのJSONデータのスクリーンショットです：

ですから、構造が$ orderFormData-> pgroups-> topseller/

を並べ替えている見ることができます。ここです検索バー：

<div style="text-align:center;"> 
    <div> 
    <span style="color:#fff;"><strong>Sort by:</strong></span> 
     <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" > 
     <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option> 
     <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="popularity" >Popularity</option> 
     <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="recently_ordered">Recently Ordered </option> 
     </select> 
    </div> 
</div> 

そして、ここではJavascriptです：

<script type="text/javascript"> 
$(function(){ 
var topsellers = "<?php echo $pgroups->topseller; ?>"; 
var reorder = "<?php echo $pgroups->reorder; ?>"; 
//console.log(topsellers); 
$('#filterText').on('change', function() { 
    var currentVal = $(this).val(); 

    if (currentVal == 'popularity' && topsellers == "1" || currentVal == 'recently_ordered' && reorder == "1") { 

    $(".groupcontainer").show(); 
    } else { 
    $(".groupcontainer").hide(); 
    } 
    }); 
}); 
</script> 

私は思っています/私は間違っていると言いたいと思っていますが、JSとJSONは私の車輪車ではありません。これらの値とドロップダウンの選択に基づいてdivを表示/非表示できるように、すべてが正しくマップされていることを確認するだけです。任意の助けは非常に感謝します。

Answer 1

コードから、topsellersとreorderには、<?php echo>コマンドによって出力される値が割り当てられます。あなたのコメントから、これらの値はfalseまたはtrueです。

そこであなたは、単にそれらの値を使ってJSの平等のチェックを一致させる必要があります。

$('#filterText').on('change', function() { 
    var currentVal = $(this).val(); 

    if (currentVal == 'popularity' && topsellers == "true" || currentVal == 'recently_ordered' && reorder == "true") { 

    $(".groupcontainer").show(); 
    } else { 
    $(".groupcontainer").hide(); 
    } 
    }); 
});