jQuery循环遍历对象数组

Question

我有以下 HTML 和 JS，我试图只显示符合 <select> 标记中选择的条件的元素。我相当确定我的 IF 语句目前无法实现我想要做的事情，即使它确实有效，但是我正在努力思考这个逻辑。

HTML：

<select id="price-from" class="form-control">        
    <option selected value="£500">£500</option>
    <option value="1000">£1,000</option>
    <option value="2000">£2,000</option>
    <option value="3000">£3,000</option>
    <option value="4000">£4,000</option>
    <option value="5000">£5,000</option>
    <option value="10000">£10,000</option>
    <option value="20000">£20,000</option>
</select>

<p>To</p>

<select id="price-to" class="form-control">
    <option value="500">£500</option>
    <option value="1000">£1,000</option>
    <option value="2000">£2,000</option>
    <option value="3000">£3,000</option>
    <option value="4000">£4,000</option>
    <option value="5000">£5,000</option>
    <option value="10000">£10,000</option>
    <option selected value="20000">£20,000</option>
</select>

JavaScript：

$(document).ready(function(){
    var product1 = {title:"Cute Gnome", type:"Cute", price:"3999"};
    var product2 = {title:"Funny Gnome", type:"Funny", price:"5999"};
    var product3 = {title:"Seasonal Gnome", type:"Seasonal", price:"12999"};
    var product4 = {title:"Horror Gnome", type:"Horror", price:"7999"};
    var productArray = [
        product1, product2, product3, product4
    ];      
    var len = productArray.length;
    for (var i = 0; i < len; i++) {
        if ($("#price-from").val() < productArray[i].price && $("#price-to").val() > productArray[i].price){
            //Loop through code and only output objects between both price criteria
        }
    }
});

Answer 1

您需要将更改事件绑定到select 元素。此外，您应该在比较之前将字符串转换为Number。使用.filter()

$('select').on('change', function() {
    var priceFrom = +$("#price-from").val(); //Convert value to Number
    var priceTo = +$("#price-to").val(); //Convert value to Number

    //Filter the elements which matches the condition
    var matchingElemets = productArray.filter(function(pd) {
        var p = +pd.price; //Convert value to Number
        return p >= priceFrom && p <= priceTo;
    });
    console.clear();
    console.log(matchingElemets);
});

$(document).ready(function() {
  var product1 = {
    title: "Cute Gnome",
    type: "Cute",
    price: "3999"
  };
  var product2 = {
    title: "Funny Gnome",
    type: "Funny",
    price: "5999"
  };
  var product3 = {
    title: "Seasonal Gnome",
    type: "Seasonal",
    price: "12999"
  };
  var product4 = {
    title: "Horror Gnome",
    type: "Horror",
    price: "7999"
  };
  var productArray = [
    product1, product2, product3, product4
  ];

  $('select').on('change', function() {
    var priceFrom = +$("#price-from").val(); //Convert value to Number
    var priceTo = +$("#price-to").val(); //Convert value to Number
    var matchingElemets = productArray.filter(function(pd) {
      var p = +pd.price; //Convert value to Number
      return p >= priceFrom && p <= priceTo;
    });
    console.clear();
    console.log(matchingElemets)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price-from" class="form-control">
  <option selected value="£500">£500</option>
  <option value="1000">£1,000</option>
  <option value="2000">£2,000</option>
  <option value="3000">£3,000</option>
  <option value="4000">£4,000</option>
  <option value="5000">£5,000</option>
  <option value="10000">£10,000</option>
  <option value="20000">£20,000</option>
</select>

<p>To</p>

<select id="price-to" class="form-control">
  <option value="500">£500</option>
  <option value="1000">£1,000</option>
  <option value="2000">£2,000</option>
  <option value="3000">£3,000</option>
  <option value="4000">£4,000</option>
  <option value="5000">£5,000</option>
  <option value="10000">£10,000</option>
  <option selected value="20000">£20,000</option>
</select>

Answer 2

下面的代码将其添加到两个选择的 onchange 属性中，您就有了一个返回列表的独立于框架的解决方案。

当然，您必须添加自己的逻辑来更改显示的产品。

请注意，.ready 在这里并没有真正做任何事情，因为它（应该）是一个事件驱动的动作。

function filter()
{
//reduces calls to DOM in for loop
var min = document.getElementById("price-from").value;
var max = document.getElementById("price-to").value;

var length = productArray.length;
var products = [];

for (var i = 0; i < length; i++) {
    if (min <= productArray[i].price && max > productArray[i].price) {
        products.push(productArray[i]);
    }
}

return products;
}

Answer 3

您大概想在select 框之一发生更改时执行此操作，因此要做的事情是在两者上挂钩change 事件并运行您的代码。您没有指定“输出”的含义，所以我将输出到控制台。

var product1 = {title:"Cute Gnome", type:"Cute", price:"3999"};
var product2 = {title:"Funny Gnome", type:"Funny", price:"5999"};
var product3 = {title:"Seasonal Gnome", type:"Seasonal", price:"12999"};
var product4 = {title:"Horror Gnome", type:"Horror", price:"7999"};
var productArray = [
    product1, product2, product3, product4
];      

$('select').on('change',function(){
   var from = parseInt($('#price-from').val(),10);
   var to = parseInt($('#price-to').val(),10);
   var matches = productArray.filter(function(x){
     var price = parseInt(x.price,10);
     return from <= price && to >= price;
   });
  console.clear();
   console.log(matches);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price-from" class="form-control">        
    <option selected value="£500">£500</option>
    <option value="1000">£1,000</option>
    <option value="2000">£2,000</option>
    <option value="3000">£3,000</option>
    <option value="4000">£4,000</option>
    <option value="5000">£5,000</option>
    <option value="10000">£10,000</option>
    <option value="20000">£20,000</option>
</select>

<p>To</p>

<select id="price-to" class="form-control">
    <option value="500">£500</option>
    <option value="1000">£1,000</option>
    <option value="2000">£2,000</option>
    <option value="3000">£3,000</option>
    <option value="4000">£4,000</option>
    <option value="5000">£5,000</option>
    <option value="10000">£10,000</option>
    <option selected value="20000">£20,000</option>
</select>

这段代码的大致作用如下

var from = parseInt($('#price-from').val(),10);
var to = parseInt($('#price-to').val(),10);

这两行获取两个选择框的值，并将它们的值解析为整数。见parseInt

var matches = productArray.filter(function(x){
 var price = parseInt(x.price,10);
 return from <= price && to >= price;
});

此行使用filter 从原始列表中获取所选价格范围内的商品。见Array.filter

console.clear();
console.log(matches);

这些行简单地清除，然后将与您的价格匹配的数组中的项目输出到控制台。如果需要，您可以轻松地遍历此列表并输出到页面。