如果数据为空，如何在 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，其中没有找到数据文本，否则执行您的项目列表...