0

したがって、次の 3 つの属性を持つ製品という名前のオブジェクトがあります。

var products = [
  {"name":"product1","size":"large","color":"blue","gender":"male"},
  {"name":"product2","size":"small","color":"pink","gender":"female"},
  {"name":"product3","size":"large","color":"green","gender":"male"},
  {"name":"product4","size":"large","color":"yellow","gender":"female"},
  {"name":"product5","size":"medium","color":"blue","gender":"female"},
  {"name":"product6","size":"large","color":"green","gender":"male"},
  {"name":"product7","size":"small","color":"yellow","gender":"male"},
  {"name":"product8","size":"medium","color":"red","gender":"female"},
  {"name":"product9","size":"large","color":"blue","gender":"male"},
  {"name":"product10","size":"small","color":"red","gender":"female"}
];

サイズ、色、性別の選択ボックスが 3 つある場合、これら 3 つをフィ​​ルタリングして製品名を取得するにはどうすればよいでしょうか。

javascript で .filter を使用しようとしています。非連想配列で使用する方法を知っています。しかし、連想配列はどうでしょうか。それらをどのように使用しますか？

4

3 に答える 3

3 
var color = document.getElementById("color").value;
var gender = document.getElementById("gender").value;
var size = document.getElementById("size").value;
var matched = products.filter(function(e) {
    return (e.color == color && e.gender == gender && e.size == size);
}).map(function(e) { return e.name; });
于 2013-08-02T05:59:20.227 に答える
1

この回答に合わせて JSfiddle を作成しました。ここでチェックしてください：http://jsfiddle.net/THEtheChad/XjGPt/

JQuery

$('input').change(function(){
   var names = filter();
});

function filter(){
  var selected = {
    size:   $('#size')  .val(),
    color:  $('#color') .val(),
    gender: $('#gender').val()

  };

  var matches = products.filter(function(product){
    return product.size == selected.size   &&
           product.color == selected.color && 
           product.gender == selected.gender;
  });

  return matches.map(function(product){ return product.name });
}

バニラJS

var d = document;

var inputs = d.getElementsByTagName('input');
// Convert to array
inputs = Array.prototype.slice.call(inputs);

inputs.forEach(function(input){
   input.addEventListener('change', function(e){
      var names = filter();
   });
});

function filter(){
  var selected = {
    size:   d.getElementById('size')  .value,
    color:  d.getElementById('color') .value,
    gender: d.getElementById('gender').value

  };

  var matches = products.filter(function(product){
    return product.size == selected.size   &&
           product.color == selected.color && 
           product.gender == selected.gender;
  });

  return matches.map(function(product){ return product.name });
}
于 2013-08-02T06:05:18.977 に答える