Question

我是第一次尝试使用Jquery Isotope插件为我的一个html模板实现数据过滤器。在浏览器控制台中不会出现任何错误，但数据过滤器不起作用。

这是我的代码：的 HTML

<div class="ui-group" style="margin-left: 20%; margin-top: 2%;">
                <h3 class="ui-group__title">Filter</h3>
                <div class="filters button-group js-radio-button-group">
                  <button class="button is-checked" data-filter="*"> All </button>
                  <button class="button" data-filter=".instances"> Instances </button>
                  <button class="button" data-filter=".images"> Images </button>
                  <button class="button" data-filter=".deployments"> Deployments </button>
                </div>
            </div>
            <div class="list_of_members">
            {% for instance in user.instances.all %}
                <div class="orders instances" style="margin-bottom: 2%;">
                    <div class="icon-text">
                        <h3>{{ instance.name }}</h3>
                        <p><b><strong style="color: orange">Server :</strong> </b><br>{{ instance.serverFile }} <br></p><br>
                        <p><b><strong style="color: orange">Package.json :</strong> </b><br>{{ instance.jsonPackageFile }}</p>
                    </div>
                </div>
                {% endfor %}
            {% for image in user.images.all %}
                <div class="orders  images" style="margin-bottom: 2%;">
                    <div class="icon-text">
                        <h3>{{ image.tagName }}</h3>
                        <p><b><strong style="color: orange">Instance :</strong> </b><br>{{ image.instance }} <br></p><br>
                        <p><b><strong style="color: orange">Created By :</strong> </b><br>{{ image.user.username }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>

加载Jquery后的Javascript部分

<script src="{% static 'js/isotope.pkgd.min.js' %}"></script>
<script>
    // Activate isotope with Jquery filter for instances,images and deployments
    $('.list_of_members').isotope({
        itemSelector: '.orders',
        layoutMode: 'fitRows'
    });
    // Isotope click function
    $('.button').click(function(){
        $('.button').removeClass('is-checked');
        $(this).addClass('is-checked');

        var selector = $(this).attr('data-filter');
        $('.list_of_members').isotope({
            filter: selector
        });
        return false;
    });
</script>

我的代码中存在任何问题或配置错误？请帮助我！

Jquery Isotope实现数据过滤器

0 个答案: