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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可能希望每当select框之一发生更改时都这样做，因此要做的事情是挂钩change事件并运行您的代码。你没有明确你的意思＆＃34;输出＆＃34;所以我只是输出到控制台。

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

这段代码的作用大致如下

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);

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

Answer 3

下面的代码将它添加到两个选择的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;
}

jQuery循环遍历一个对象数组

3 个答案: