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”（性别）是男性（男性）或vrouw（女性）时附加男性。< / p>

我也尝试追加性别，然后将它放入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属性的项。

$.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>');
});

对于切换，我现在没有看到任何错误。您现在可以专注于数据处理部分，稍后再对其进行更多调试。

Answer 2

您的if条件应位于$.each()循环内，如下所示：

        $.each(data, function(index, item) {  
            if(item.geslacht == "man") {
            }
            else if(item.geslacht == "vrouw")
            {
            }
        })

根据复选框选项

2 个答案: