如果數據為空，如何在 function 中顯示和隱藏，否則顯示文本？

Question

嗨，我現在遇到了一些問題，如果用戶 select 從 ajax 的下拉列表中選擇一個類型，它會顯示給定的數據，如果用戶 select 不包含該類型的數據，它將如何顯示沒有數據記錄？

當我的 function 被調用時，我隱藏並顯示了一些新的更新，但是當 select 與可回收物品未找到任何修復時顯示為某種類型的錯誤？

下面的圖片沒有顯示哪個是正確的

有數據的錯誤仍然顯示未找到可回收類型

正確，因為沒有數據

 $("#recyclable-type").change(function(){
    var type = $(this).val();

    //show only checkbox having the  data-type attribute
    if ($(this).val()!="" && $(this).val()!=null) {
        // hide all checkbox
        $("#checkbox").find("li").hide();

        // filters by recyclable type
       if($("#checkbox").find("li[data-type='" + type + "']").show()){
                toggleRecord("noRecords");

       }

    } else {
        $("#checkbox").find("li").show();
        toggleRecord("success");
    }

        // console.log($(this).find("li[data-type='" + type + "']"));
    })


    function toggleRecord(state) {
        // The 'No Records' section toggles in case there are no records to be found when using the filter functions
        if (state=="success") {
            // Hides when there's at least one record being displayed
            $("#no-recyclable-records").hide();
        }else if (state=="noRecords") {
            $("#no-recyclable-records").show();
        }
    }

下面是 html 的片段

 .container-body { border: 1px solid black; border-radius: 1px; margin-top: 20px; margin-left: 10px; } fieldset.Field { margin-top: 10px; padding: 0; height: 100%; } ul.checkbox { margin: 0; padding: 0; margin-left: 20px; list-style: none; } ul.checkbox li input { margin-right: .25em; }.container-body ul.checkbox li { float: left; min-width: 350px; } #no-recyclable-records { border: 1px solid rgb(0, 0, 0); padding: 5px; border: hidden; text-align: center; height: 120; justify-content: center; align-items: center;

 <div class="container position"> <div class="row"> <label for="recyclable-type" class="col-form-label"> <b>Recyclable Type:</b> </label> &nbsp;&nbsp; <select id="recyclable-type" name="recyclable-type" class=" custom-select col-4"> <option selected value="">All</option> </select> </div> </div> <div class="container-body "> <fieldset class="Field"> <ul id="checkbox" class="checkbox"> </fieldset> </ul> <div id="no-recyclable-records"> <h4>No Recyclable Records Found</h4> </div> </div>

這是我的 ajax 代碼

$.ajax({
                url: 'https://ecoexchange.dscloud.me:8090/api/get',
                method:"GET",
                },
                success:function(data,textStatus,xhr) {
                    // console.log(data);
                    for (let i = 0;i<data.length;i++) {
                        $("#recyclable-type").append(
                            `
                            <option value = "${data[i]["RecyclableType"]}">${data[i]["RecyclableType"]}</option>
                            `
                        );
                    
                    }
                },
                error:function(xhr,textStatus,err) {
                    console.log(err);
                }
            });


            $.ajax( {
            url: 'https://ecoexchange.dscloud.me:8090/api/get',
            type: 'GET',
            dataType: 'json',
            headers:{
                query: "RecyclableGet(0)",
                // Gets the apikey from the sessionStorage
                apikey: sessionStorage.getItem("apikey")
            },
            success: function(data) {
            //console.log(data);
            var html='';
            $.each(data, function(key, value) {
                var type = value.RecyclableType
                //console.log(type)
                html +='<li data-type="'+ type + '"><input type="checkbox" name="recyclable_id[]" value="'+value.RecyclableID+'"><label style="padding-left: 10px;">'+value.Name+'</label><br></li>';
                //console.log(value)
            });
            $('#checkbox').html(html);

            }
        });

        $("#recyclable-type").change(function(){
        var type = $(this).val();

        //show only checkbox having the  data-type attribute
        if ($(this).val()!="" && $(this).val()!=null) {
            // hide all checkbox
            $("#checkbox").find("li").hide();

            // filters by recyclable type
            $("#checkbox").find("li[data-type='" + type + "']").show();
        } else {
            $("#checkbox").find("li").show();
        }
            // console.log($(this).find("li[data-type='" + type + "']"));
        })

這是我的 ajax 回復

[
    {
        "RecyclableID": 1,
        "Name": "recyclable",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 3,
        "Name": "test recyclable 2",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 129,
        "Name": "test recyclable 4",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 131,
        "Name": "test recyclable 6",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 132,
        "Name": "test recyclable 7",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 133,
        "Name": "test recyclable 8",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 134,
        "Name": "test recyclable 34",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 138,
        "Name": "recyclable thing",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 139,
        "Name": "recyclable thing 2",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 153,
        "Name": "test recyclable 10",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 154,
        "Name": "test recyclable 11",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 155,
        "Name": "test recyclable 123",
        "RecyclableType": "test recyclable type 2"
    },
    {
        "RecyclableID": 159,
        "Name": "some recyclable name",
        "RecyclableType": "CC"
    },
    {
        "RecyclableID": 161,
        "Name": "some recyclable name 2",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 162,
        "Name": "recyclable 2",
        "RecyclableType": "test recyclable type 2"
    },
    {
        "RecyclableID": 165,
        "Name": "test recyclable 15",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 166,
        "Name": "test recyclable 18",
        "RecyclableType": "testing type"
    },
    {
        "RecyclableID": 167,
        "Name": "some recyclable name 23",
        "RecyclableType": "Ewaster"
    },
    {
        "RecyclableID": 168,
        "Name": "Lorem ipsum dolor sit amet, consectetur",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 169,
        "Name": "Copper",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 170,
        "Name": "Choking Bar",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 171,
        "Name": "Cabinet",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 172,
        "Name": "Cash Box",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 173,
        "Name": "Copper Telephone Cable",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 174,
        "Name": "Rope",
        "RecyclableType": "CC"
    },
    {
        "RecyclableID": 175,
        "Name": "Silver",
        "RecyclableType": "test recyclable type"
    }
]

這就是我的網站的樣子

因此，如果用戶 select Gold / Metal 我應該看到 No Recyclables Records Found 因為它沒有價值

我怎樣才能為它編寫我的代碼？

Answer 1

你的第一個AJAX在method下有一個額外的方括號，你正在使用$('#recyclable-type').change(function(){}); 兩次有兩種不同的行為，嘗試只使用一種，不要忘記用else if語句而不是 else 提及所有記錄的情況，這應該可以工作

Answer 2

 success: function(data) { 

在這里，您必須讀取數據，如果長度為 0，則添加 li，其中沒有找到數據文本，否則執行您的項目列表...