按钮点击时使用同位素对数据进行排序，目前仅运行一次动画

Question

Problem

当一个人点击一个特定主题的按钮.btn：数学，英语，科学或社会研究时，我希望使用Isotope.js $grid.isotope({ sortBy: "percentage" });从高到低排序他们的标记。

• 目前，它只排序一次，你会看到动画改变了.schools的顺序。但是当你第二次点击时，它们在技术上已经从最高到最低，所以你只看到这个小反弹，但实际上没有发生任何事情。
• 我想给它一个再次排序的外观。所以在这种情况下，我应该在if语句的某处包含某个地方$grid.isotope({ sortBy: "original-order" });，以便每次单击一个按钮时动画都会运行吗？

scripts.js中

$(function(){

    function printData() {
        // Generates zero-indexed numbers from one through nineteen
        for(var i = 0; i < schools.length; i++) {
            // console.log(i);

            // Each school will have data pertaining to their name, district and crest
            var schoolName = $(".school__name").eq(i).html(schools[i].name);
            var schoolDistrict = $(".school__district").eq(i).html(schools[i].district);
            var schoolCrest = $(".school__image").eq(i).attr("src", schools[i].crest);

            // English is shown as the default subject as it has a class 'is-selected'
            var percentEnglish = $(".school__percentage").eq(i).html(schools[i].percentEnglish);
        }
    }

    function pickSubject() {
        $(".btn").click(function(){

            // A default class of is-selected is removed
            // It is then added onto whatever button you just clicked
            $(".btn").removeClass("is-selected");
            $(this).addClass("is-selected");

            // Set a variable to indicate the grid container
            // Select what items will be used in the layout
            var $grid = $(".schools").isotope({
                itemSelector: ".school",
                layoutMode: 'fitRows',

                // Reference the class of the specific div
                // parseInt or the numbers will be out of order
                getSortData: {
                    percentage: ".school__percentage parseInt",
                },

                // True is the default order
                // Sort in ascending order 1,2,3 = true
                // Sort in descending order 3,2,1 = false
                sortAscending: {
                    percentage: false
                }
            });

            // Sort by percentage
            $grid.isotope({ sortBy: "percentage" });

            // If the button you just click has a specific class
            // Then present all the data associated with those schools
            if ($(this).hasClass("btn-english")) {
                $(".school__percentage").each(function(i, element) {
                    $(element).html(schools[i].percentEnglish);
                });
            } else if ($(this).hasClass("btn-math")) {
                $(".school__percentage").each(function(i, element) {
                    $(element).html(schools[i].percentMath);
                });
            } else if ($(this).hasClass("btn-science")) {
                $(".school__percentage").each(function(i, element) {
                    $(element).html(schools[i].percentScience);
                });
            } else if ($(this).hasClass("btn-social")) {
                $(".school__percentage").each(function(i, element) {
                    $(element).html(schools[i].percentSocial);
                });
            }
        });
    }

    printData();
    pickSubject();
});

的index.html

<!-- Elementary school -->
    <div class="widget high-school">
        <div class="widget__info">
            <p class="widget__category">Elementary school</p>
            <p class="widget__title">Missouri Assessment Program standouts</p>
        </div>

        <div class="widget__buttons">
            <p class="widget__rank">Rank by:</p>
            <button class="btn btn-english is-selected">English</button>
            <button class="btn btn-math">Math</button>
            <button class="btn btn-science">Science</button>
            <button class="btn btn-social">Social Studies</button>
        </div>

        <div class="wrapper">
            <div class="schools">
                <div class="school" data-id="1">
                    <img src="src/img/crest-clayton.jpg" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="2">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="3">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="4">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="5">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="6">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="7">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="8">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="9">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="10">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="11">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="12">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="13">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="14">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="15">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="16">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="17">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="18">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="19">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="20">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->
            </div><!-- schools -->
        </div>

        <div class="all__container">
            <div class="all__container--right">
                <button class="btn btn-download"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
                <button class="btn btn-embed"><i class="fa fa-share" aria-hidden="true"></i>Embed</button>
            </div>
        </div>

        <div class="branding">
            <img src="">
        </div>
    </div><!-- widget -->

Answer 1

你需要使用

$grid.isotope('updateSortData').isotope();

在SortBy方法之后，所以你'在对项元素进行了更改之后更新排序数据'，根据documentation

Answer 2

这个问题可能很旧，但只有一次同位素分选问题。修复涉及破坏和重新初始化同位素 在.click事件函数之外实例化

var isOptions = {
                itemSelector: ".school",
                layoutMode: 'fitRows',

                // Reference the class of the specific div
                // parseInt or the numbers will be out of order
                getSortData: {
                    percentage: ".school__percentage parseInt",
                },

                // True is the default order
                // Sort in ascending order 1,2,3 = true
                // Sort in descending order 3,2,1 = false
                sortAscending: {
                    percentage: false
                }
            }
$grid.isotope(isOptions);

在$（“。btn”）中。单击函数在调用sort函数之前添加这两行

$grid.isotope('destroy')
$grid.isotope(isOptions);
//Sort by percentage
$grid.isotope({ sortBy: "percentage" });

你基本上是在破坏和重新初始化同位素。