如果数据为空，如何显示和隐藏函数，否则显示文本？

Question

嗨，我现在遇到了一些问题，如果用户从 ajax 的下拉列表中选择一个类型，它会显示给定的数据，如果用户选择一个不包含数据值的类型，它将显示找不到任何记录，我怎么能做吗？

Some new update i have hide and show when my function is being call but is kind of bug as some type when select is show with the recyclables not found any fix ?

这里是下图 没有显示哪个是正确的

Bug 因为有数据仍然显示未找到可回收类型

正确，因为没有数据

 $("#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 的 sn-p

  .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"
    }
]

这就是我的网站的样子

所以如果用户选择黄金/金属 我应该看到 No Recyclables Records Found，因为其中没有任何价值

我如何为它编写代码？

Answer 1

您的第一个 AJAX 在 method 下有一个额外的方括号，并且您使用 $('#recyclable-type').change(function(){}); 两次具有两种不同的行为，请尝试仅使用一个并且不要忘记提及使用 else if 语句而不是 else 的所有记录的情况，这应该可以完成工作

Answer 2

 success: function(data) { 

在这里您必须读取数据，如果长度为 0，则添加 li，其中没有找到数据文本 否则做你的项目清单...