php - 无论如何在laravel视图中使用JSON数据实现过滤？

Question

我正在尝试创建 4 个不同按钮的过滤：

<div class="allCategories">
        <div>
            <button data-filter="physical">
                <img src="/img/difficulties/physical_cube.svg" alt="thunder">
            </button>
        </div>
        <div>
            <button data-filter="brain">
                <img src="/img/difficulties/brain_cube.svg" alt="glasses">
            </button>
        </div>
        <div>
            <button data-filter="skill">
                <img src="/img/difficulties/skills_cube.svg" alt="glasses">
            </button>
        </div>
        <div>
            <button data-filter="*">
                <img src="/img/difficulties/all_cube.svg" alt="stack">
            </button>
        </div>
    </div>

所以当我点击其中一个时，我希望它只显示那些卡片。例如，当我单击物理时，它只显示物理的。我的视图默认加载所有数据，如下所示：

<div class="container" >
            <div class="row" style="margin-top: 200px">
 
                @foreach ($room_data as $r)

                <div class="col-md-6 col-lg-3 " data-category="{{ $r->category }}">
                    <div class="card-deck" style="margin: 0">
                        <div id="room_card"class="card mb-4 flex-fill">
                            <img class="card-img-top" src="/img/room_logos/{{ $r->id }}.png" />
                            <div class="card-body" style="">
                                <h5 class="card-title">{{ $r->name }}</h5>
                                <ul class="room_perc">
                                    <li> <img src="/img/difficulties/physical_cube.svg" alt="physical" />
                                        <p> {{ $r->percentages->physical }} </p>
                                    </li>
                                    <li><img src="/img/difficulties/brain_cube.svg" alt="brain" />
                                        <p> {{ $r->percentages->brain }} </p>
                                    </li>
                                    <li> <img src="/img/difficulties/skills_cube.svg" alt="skills" />
                                        <p> {{ $r->percentages->skills }}</p>
                                    </li>
                                </ul>
                                <a href="{{$url_locale}}/rooms/{{$r->id}}" class="stretched-link"></a>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach

            </div>

        </div>

关于如何做的任何想法？

我试图用下面的代码来做，但它根本不起作用：

<script>
    (function ($) {

"use strict";

// javascript code here. i.e.: $(document).ready( function(){} );
$(document).ready(function ($) {
    var $container = $('.container');
    $.ajax({
        url: "../data/rooms.json",
        method: "GET",
        dataType: 'json',
        success: function (response) {
            var template = $('').html();
            var renderer = Handlebars.compile(template);
            var result = response;
            $('.container').html(renderer(result));
            runIsotope();
        }
    });

    function runIsotope() {
        $container.isotope({
                itemSelector: '.row',
                layoutMode: 'fitRows',
                fitRows: {
                    gutter: 40
                },
                getSortData: {
                    number: '.allCategories parseInt'
                }
        });
        $container.isotope('reloadItems')
        // Sort based on price
        $('#allCategories').on('click', 'a', function ( event ) {
            var $target = $(event.currentTarget)
            var sortValue = $target.attr('data-sort');
            console.log( sortValue );
            $container.isotope({
                sortBy: sortValue
            });
        });
    } //RUN ISOTOPE
}); // END DOCUMENT READY
})(jQuery); // END use strict
    </script>

标签： phpjqueryjsonlaravellaravel-blade