javascript - 根据复选框选择显示 JSON 数据

Question

我想知道是否可以根据复选框的选择显示特定的 JSON 数据。

目前我有特定的 JSON 数据，其中包含人名、部门、​​性别和互联网使用情况。 我已经设法按名称、部门显示此数据，并绘制了一个使用情况的条形图。

我制作了两个复选框，选中时会显示此 JSON 数据。然而，在这个特定时刻，它们仍然显示相同的数据。我需要找到一种方法来解决这个问题，在尝试了某些事情之后，我有点迷失了方向。

这是获取 JSON 数据的代码，显示它和复选框 + 它背后的代码:

JS:

$(document).ready(function() {
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="female") {
            $(".female").toggle();
        }
        if($(this).attr("value")=="male") {
            $(".male").toggle();
        }
    });
});

ajax();

function ajax() {
    $.ajax({
        url:"wifi_data.json",
        dataType:"json",
        success: function(data) {
            //if(data.geslacht == "man") {
            $.each(data, function(index, item) {                           
                $('#females').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam + 
                                     '<br>Department: ' + data[index].afdeling +
                                     '<br>Usage: ' + '<div style="width:'+ 
                                     data[index].verbruik*0.001  
                                     +'px;height:10;border:2px solid ; background-color:red;"></div>' +
                                     '<div style="'+ '<br>Sex: ' +
                                     data[index].geslacht +'"></div>'  );
            }); 
            //}

            //if(data.gelsacht =="vrouw") {
                $.each(data, function(index, item)
                       {                           
                    $('#males').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam + 
                                       '<br>Department: ' + data[index].afdeling +
                                       "<br>Usage: " + '<div style="width:'+ 
                                       data[index].verbruik*0.001  
                                       +'px;height:10;border:2px solid ; background-color:red"></div>' );
                });
            //}
        }   
    })
}

HTML:

<div>
    <label><input type="checkbox" name="colorCheckbox" value="female"> Show Female Members</label>
        <br>
    <label><input type="checkbox" name="colorCheckbox" value="male"> Show Male Members</label>
</div>
<div class="female box">
    <div id="females"></div>
</div>
<div class="male box">
    <div id="males"></div>
</div>

我在此处尝试对代码的注释部分(以及一些已删除的代码)执行的操作是仅在“geslacht”(sex) 为 man(male) 或 vrouw(female) 时附加 males。

我还尝试附加性别，然后将其放入 div 中并隐藏。为了可能检查是否检查了男性或女性，然后显示隐藏的 div，其中包含所有男性或女性。

我的问题是，在如何检查已检查的内容，然后仅根据选择从 JSON 文件中收集男性或女性方面，我脑袋放了一个大屁。

JSON 看起来像这样:

{
    "46": {
    "voornaam": "Sergio",
    "achternaam": "Bloemenouw",
    "verbruik": "100000",
    "afdeling": "FHACI",
    "geslacht": "man",
    "verbruikPercentage": "18.2%"
},
"25": {
    "voornaam": "Chayenne",
    "achternaam": "Aalberink",
    "verbruik": "200000",
    "afdeling": "FHEHT",
    "geslacht": "vrouw",
    "verbruikPercentage": "36.4%"
},

等等……

希望有人能引导我走向正确的方向。 我认为我需要弄清楚的最重要的事情是如何只显示女性或男性，包括他们的名字、用法(“verbruikPercentage”)和部门(“afdeling”)

Answer 1

您的问题包含两个问题。一种是将数据分为男性和女性部分，另一种是关于显示/隐藏元素。

对于数据分离，您需要为每个数据项执行if 语句，因为它是包含geslacht 的项属性(property)。

$.each(data, function(index, item) {                          
    var target = item.geslacht === 'man' ? $('#males') : $('#females');
    target.append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam + 
                  '<br>Department: ' + data[index].afdeling +
                  '<br>Usage: ' + '<div style="width:'+ data[index].verbruik*0.001 +
                  'px;height:10;border:2px solid ; background-color:red;"></div>' +
                  '<div style="'+ '<br>Sex: ' + data[index].geslacht +'"></div>');
});

---

对于切换，我暂时没有发现任何问题。您可以先关注数据处理部分，稍后再进行调试。