如何应用排序幻灯片动画使用JavaScript和jquery当屏幕< ul>上显示

58wvjzkj 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(112)

我的要求是，当另一个值来自另一个API时，我想用幻灯片动画显示价格排序。总共有5个API。动画就像我们通常在任何联赛中看到的那样，排名最低的球员会出现动画或任何游戏。
下面是我的代码（它是在.cshtml）：

<ul id="externalPharmacyList" @* data-aos="fade-up" *@></ul>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
$(document).ready(function () {
var data1 = @Html.Raw(Json.Serialize(Model));
var data2 = @Html.Raw(Json.Serialize(Model));
var jsonData = data1.concat(data2);

function displaySortedData() {
    // Modify the sorting function to compare copay values as numbers
    var sortedJsonData = jsonData.sort(function (a, b) {
        return parseFloat(a.copay) - parseFloat(b.copay);
    });

    for (var i = 0; i < sortedJsonData.length; i++) {
        var item = sortedJsonD`your text`ata[i];
        var fullAddress = item.address1 + " " + item.address2 + " " + item.city + " " + item.state + " " + item.zipCode;

        var listItemHtml = `
            <li style="display:none;">
                <div class="b-m-pharmacy-det">
                    <div class="b-p-name">
                        ${item.pharmacyName}
                        <small>${fullAddress}</small>
                    </div>
                    <div class="b-m-qty">
                        ${item.quantity} ${item.drugName}
                    </div>
                    <div class="b-m-price" style="text-align:right">
                        ${item.copay}
                    </div>
                </div>
            </li>`;

        $('#externalPharmacyList').append(listItemHtml);
    }

    // Apply the slide animation to the list items
    $('#externalPharmacyList li').slideDown();
   }

// Call the displaySortedData function after both data sets are concatenated
  displaySortedData();
 });

字符串
在这段代码中，值来自soap API，我将其转换为JSON，然后类似地，我再次调用该API并将其排序在另一个变量中。然后，我将两个JSON数据结合起来。之后，我将对传入的JSON数据进行排序，然后应用幻灯片动画。我可能在这里错了，因为我想在排序时应用动画。如果有人能指导我做什么，那将非常有帮助。我做错了。

jquery

来源：https://stackoverflow.com/questions/77689504/how-to-apply-sorting-slide-animation-using-javascript-and-jquery-when-the-ul-d

1条答案

按热度按时间

um6iljoc1#

这里重要的一点是不仅要对数据进行排序，还要对列表项的重新排序进行动画。您当前的方法涉及将排序的项附加到列表中，然后使用slideDown进行动画。然而，slideDown更适合显示隐藏的元素，而不是排序动画。
我认为你最好先不排序地显示列表项。这是动画的起点。
假设jsonData是你的API响应，在看到你的JSON数据后，我在一个简单的HTML模板中添加了代码进行测试。我添加了模拟JSON数据变化的按钮（或者换句话说，新数据的到来）。它现在正在工作并显示动画。

<!DOCTYPE html>
<html>
<head>
    <title>Sorting and Updating</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .b-m-pharmacy-det { border: 1px solid #ddd; margin: 10px 0; padding: 10px; }
        .b-p-name, .b-m-qty, .b-m-price { margin-bottom: 5px; }
        button { margin: 20px 0; }
    </style>
</head>
<body>

<button id="addNewItemButton">Add New Item</button>
<ul id="externalPharmacyList"></ul>

<script>
$(document).ready(function () {
    var jsonData = [
        { "pharmacyName": "Pharmacy A", "address1": "123 Main St", "address2": "", "city": "CityA", "state": "ST", "zipCode": "12345", "phone": "123-456-7890", "copay": "$15.20", "drugName": "Drug A", "quantity": "30" },
        { "pharmacyName": "Pharmacy B", "address1": "456 Elm St", "address2": "", "city": "CityB", "state": "ST", "zipCode": "67890", "phone": "987-654-3210", "copay": "$10.50", "drugName": "Drug B", "quantity": "60" }
    ];

    function displaySortedData() {
        var sortedJsonData = jsonData.sort(function (a, b) {
            return parseFloat(a.copay.replace(/[^0-9.-]+/g,"")) - parseFloat(b.copay.replace(/[^0-9.-]+/g,""));
        });

        $('#externalPharmacyList').empty();

        sortedJsonData.forEach(function(item, index) {
            var fullAddress = item.address1 + " " + item.address2 + " " + item.city + " " + item.state + " " + item.zipCode;

            var listItemHtml = `
                <li>
                    <div class="b-m-pharmacy-det">
                        <div class="b-p-name">
                            ${item.pharmacyName}
                            <small>${fullAddress}</small>
                        </div>
                        <div class="b-m-qty">
                            ${item.quantity} ${item.drugName}
                        </div>
                        <div class="b-m-price" style="text-align:right">
                            ${item.copay}
                        </div>
                    </div>
                </li>`;

            $(listItemHtml).hide().appendTo('#externalPharmacyList').delay(index * 100).fadeIn(500);
        });
    }

    // Function to add a new item to jsonData and then update the list
    $('#addNewItemButton').click(function() {
        // Sample new item
        var newItem = {
            "pharmacyName": "Pharmacy C",
            "address1": "789 Oak St",
            "address2": "",
            "city": "CityC",
            "state": "ST",
            "zipCode": "10112",
            "phone": "555-123-4567",
            "copay": "$12.30",
            "drugName": "Drug C",
            "quantity": "45"
        };

        // Add the new item to jsonData
        jsonData.push(newItem);

        // Update the list
        displaySortedData();
    });

    // Initial display
    displaySortedData();
});
</script>

</body>
</html>

字符串
你应该尝试实现一个类似的方法，当你的JSON数据发生变化时，点击这里的按钮的事件被触发。为了能够测试它，我在一个示例HTML模板中添加了脚本，但你可以将其更改为.cshtml。

赞(0）回复(0）举报 12个月前

我来回答

如何应用排序幻灯片动画使用JavaScript和jquery当屏幕< ul>上显示

1条答案

相关问题

热门标签

最新问答