Question

我正在从名为emp的对象中检索数据。我循环遍历该对象并连续打印每个条目。

我想让用户在勾选复选框时能够过滤他们的数据。例如。如果他们点击该复选框，则只显示33岁以下的员工。

到目前为止我的代码：

   var emp = {
"employees":[
    {
        "firstName":"John",
        "details": {
            "role" : "manager",
            "age" : 55
        },
        "lastName":"Doe"
    }, 
    {
        "firstName":"Anna",
        "details": {
            "role" : "cashier",
            "age" : 35
        },
        "lastName":"Smith"
    }, 
    {
        "firstName":"Peter",
        "details": {
            "role" : "manager",
            "age" : 23
        },
        "lastName":"Jones"
    }, 
    {
        "firstName":"Jim",
        "details": {
            "role" : "cleaner",
            "age" : 20
        },
        "lastName":"Doveson"
    }, 
    {
        "firstName":"Nick",
        "details": {
            "role" : "waiter",
            "age" : 38
        },
        "lastName":"Doe"
    }
]
}

$(document).ready(function() {
var fixtureHTML = "";
 $.each(emp.employees, function(key, value) { 
            fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';

            if($("#check").is(':checked')) {
                if(value.details.age < 33) {
                   return false;
                }
            }
});
$('.js-load').append(fixtureHTML);
});

<div class="js-load"></div>
<input type="checkbox" name="check-filter" value="unit-in-group" id="check"/>
Check this box for filter by employees younger than 30

Answer 1

我不认为这是最好的方式，但这可以给你一个想法

var emp = {
"employees":[
    {
        "firstName":"John",
        "details": {
            "role" : "manager",
            "age" : 55
        },
        "lastName":"Doe"
    }, 
    {
        "firstName":"Anna",
        "details": {
            "role" : "cashier",
            "age" : 35
        },
        "lastName":"Smith"
    }, 
    {
        "firstName":"Peter",
        "details": {
            "role" : "manager",
            "age" : 23
        },
        "lastName":"Jones"
    }, 
    {
        "firstName":"Jim",
        "details": {
            "role" : "cleaner",
            "age" : 20
        },
        "lastName":"Doveson"
    }, 
    {
        "firstName":"Nick",
        "details": {
            "role" : "waiter",
            "age" : 38
        },
        "lastName":"Doe"
    }
]
}

$(document).ready(function() {
var fixtureHTML = "";
 $.each(emp.employees, function(key, value) { 
            fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';
});
$('.js-load').append(fixtureHTML);
});

$("#check").on("change",function(){
  var check = $(this);
  $('.js-load').html("");
  var fixtureHTML = "";
  $.each(emp.employees, function(key, value) { 
  if(check.is(':checked')) {
                if(value.details.age < 33) {
                  fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';
                }
            } else{
             
            fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';
              }
    });
  $('.js-load').append(fixtureHTML);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="js-load"></div>
<input type="checkbox" name="check-filter" value="unit-in-group" id="check"/>
Check this box for filter by employees younger than 30

Answer 2

重要的部分是以下处理程序：

$('#check').on('change', function() {    
  var $media = $('.media');

  // reduce selected set of .media nodes to those that have an .age >= 33
  // and toggle their visibility based on #check's `checked` property
  $media.filter(function(i, el) {
    return parseInt($(el).find('.age').text(), 10) >= 33;
  }).toggle(!this.checked);
});

请参阅jQuery的filter，find，toggle和text函数以及parseInt。

＆＃13;

var emp = {
  "employees":[
    {
        "firstName":"John",
        "details": {
            "role" : "manager",
            "age" : 55
        },
        "lastName":"Doe"
    }, 
    {
        "firstName":"Anna",
        "details": {
            "role" : "cashier",
            "age" : 35
        },
        "lastName":"Smith"
    }, 
    {
        "firstName":"Peter",
        "details": {
            "role" : "manager",
            "age" : 23
        },
        "lastName":"Jones"
    }, 
    {
        "firstName":"Jim",
        "details": {
            "role" : "cleaner",
            "age" : 20
        },
        "lastName":"Doveson"
    }, 
    {
        "firstName":"Nick",
        "details": {
            "role" : "waiter",
            "age" : 38
        },
        "lastName":"Doe"
    }
  ]
};

$(document).ready(function() {
  var fixtureHTML = "";
  
  $.each(emp.employees, function(key, value) { 
    fixtureHTML += '<div class="media">'
    fixtureHTML += '<div class="meta-info">';
    fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
    fixtureHTML += '<span class="info">' + value.lastName + '</span>';
    fixtureHTML += '<span class="role">' + value.details.role + '</span>';
    fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
    fixtureHTML += '</div></div>';
  });
  
  $('.js-load').append(fixtureHTML);
  
  $('#check').on('change', function() {    
    var $media = $('.media');
    
    $media.filter(function(i, el) {
      return parseInt($(el).find('.age').text(), 10) >= 33;
    }).toggle(!this.checked);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-load"></div>

<label>
  <input type="checkbox" name="check-filter" value="unit-in-group" id="check"/>
  Check this box for filter by employees younger than 30
</label>

＆＃13;

Answer 3

创建函数checkStatus并在其中添加过滤代码：

将此功能称为使用单击复选框以进行过滤

var emp = {
"employees":[
    {
        "firstName":"John",
        "details": {
            "role" : "manager",
            "age" : 55
        },
        "lastName":"Doe"
    }, 
    {
        "firstName":"Anna",
        "details": {
            "role" : "cashier",
            "age" : 35
        },
        "lastName":"Smith"
    }, 
    {
        "firstName":"Peter",
        "details": {
            "role" : "manager",
            "age" : 23
        },
        "lastName":"Jones"
    }, 
    {
        "firstName":"Jim",
        "details": {
            "role" : "cleaner",
            "age" : 20
        },
        "lastName":"Doveson"
    }, 
    {
        "firstName":"Nick",
        "details": {
            "role" : "waiter",
            "age" : 38
        },
        "lastName":"Doe"
    }
]
}

$(document).ready(function() {
  checkStatus();
});
function checkStatus() {  
  var fixtureHTML = "";
  $.each(emp.employees, function(key, value) { 

      if($("#check").is(':checked')) {
          if(value.details.age < 33) {
             return false;
          }
      }
      fixtureHTML += '<div class="media">'
      fixtureHTML += '<div class="meta-info">';
      fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
      fixtureHTML += '<span class="info">' + value.lastName + '</span>';
      fixtureHTML += '<span class="role">' + value.details.role + '</span>';
      fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
      fixtureHTML += '</div></div>';

      
  });
  $('.js-load').html(fixtureHTML);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="js-load"></div>
<input type="checkbox" onclick="checkStatus();" name="check-filter" value="unit-in-group" id="check"/>

如何在点击输入时从对象过滤数据？

3 个答案: