Question

我正在尝试创建一个过滤器系统，允许用户输入价格，因此只有阵列中价格较低的节日才会被提醒。但是，该程序将显示所有节日。感谢您的任何答复。

代码：

RunLongRunningMethod(cts.Token);

var festivals = [
   ["Reading", "Richfield Avenue", 205, "24th - 26th August", "Rock"],
   ["Park Life", "Manchester", 140, "8th - 9th June", "Dance"],
   ["Glastonbury", "Somerset", 250, "23rd - 25th June", "Alternative"]
];
var filterfestivals = [[]];
var maxuserprice = document.getElementById("maxprice").value;

function filter() {
  for (var i = 0; i < festivals.length; i++)
    if (maxuserprice < festivals[i][2]) {
      filterfestivals.push(festivals[i])
      alert(filterfestivals)
      //i = i + 1
    }
}

Answer 1

您需要执行以下操作

在click函数内移动变量filterfestivals和maxuserprice，因为它们需要具有最新值，而不是页面加载时的值。
将filterfestivals初始化为一个空数组。
maxuserprice是一个字符串，应将其转换为数字。尽管它在这种情况下仍然可以工作，但不能比作比较（<），但类型被强制为number。

var festivals = [["Reading","RichfieldAvenue",205,"24th-26thAugust","Rock"],["ParkLife","Manchester",140,"8th-9thJune","Dance"],["Glastonbury","Somerset",250,"23rd-25thJune","Alternative"]];

function filter() {
  var filterfestivals = [];
  var maxuserprice = Number(document.getElementById("maxprice").value);
  for (var i = 0; i < festivals.length; i++)
    if (maxuserprice < festivals[i][2]) {
      filterfestivals.push(festivals[i])
      alert(filterfestivals)
    }
}

<p1> Please enter your maximum spending price </p1>
<input id="maxprice"> </input>
<button onclick="filter()"> Filter </button>

Answer 2

maxuserprice将始终为初始值（在这种情况下为''）。您应该在过滤器函数中设置新值，并且还应该首先清除过滤后的数组，并且不要使用[[]]，因为这并不意味着二维数组，它只是使用第一个元素的空数组来初始化数组。 / p>

var filterfestivals = [];

function filter () {
    filterfestivals = [];
    var maxuserprice = Number(document.getElementById("maxprice").value);
    for (var i = 0; i < festivals.length; i++) {
        if (maxuserprice < festivals[i][2]){
            filterfestivals.push(festivals[i])
        }
    }
}

Answer 3

您应该在单击按钮时阅读价格，否则在提供任何输入之前，应先对其进行初始化（您还应该将输入转换为数字）

您还需要在每个filterfestivals调用中重置filter数组，以免它们累加。

最后，您当前的支票执行相反的操作，它只显示价格高于输入内容的支票。

//  Festival[x][0]   city[x][1]     cost[x][2]    date[x][3]    genre[x][4]

var festivals = [
  ["Reading", "Richfield Avenue", 205, "24th - 26th August", "Rock"],
  ["Park Life", "Manchester", 140, "8th - 9th June", "Dance"],
  ["Glastonbury", "Somerset", 250, "23rd - 25th June", "Alternative"]
];
var filterfestivals = [];

function filter() {
  var maxuserprice = parseFloat(document.getElementById("maxprice").value);
  filterfestivals = [] // empty the filterfestival array so that we can filter multiple times
  for (var i = 0; i < festivals.length; i++)
    if (maxuserprice >= festivals[i][2]) {
      filterfestivals.push(festivals[i])
      //i = i + 1
    }
    alert(filterfestivals.join('\n'))
}

<p1> Please enter your maximum spending price </p1>
<input id = "maxprice"> </input>
<button onclick = "filter()"> Filter </button>

或者，在Array对象上有一个filter方法更易于使用。

如此

//  Festival[x][0]   city[x][1]     cost[x][2]    date[x][3]    genre[x][4]

var festivals = [
  ["Reading", "Richfield Avenue", 205, "24th - 26th August", "Rock"],
  ["Park Life", "Manchester", 140, "8th - 9th June", "Dance"],
  ["Glastonbury", "Somerset", 250, "23rd - 25th June", "Alternative"]
];
var filterfestivals = [];

function filter() {
  var maxuserprice = parseFloat(document.getElementById("maxprice").value);
  filterfestivals = festivals.filter(function(festival) {
    return festival[2] <= maxuserprice;
  });
  alert(filterfestivals.join('\n'))
}

<p1> Please enter your maximum spending price </p1>
<input id="maxprice"> </input>
<button onclick="filter()"> Filter </button>

Answer 4

它有很多错误，但这是整个代码的全部工作。

从编辑输入到JS中几乎所有内容。只需仔细阅读并学习即可。

<!DOCTYPE html>
<html>

<head>
</head>

<body> 
<p1> Please enter your maximum spending price </p1>
<input type="number" id="maxprice"/>
<button onclick = "filter()"> Filter </button>


      <script>
      //               Festival[x][0]   city[x][1]           cost[x][2]    date[x][3]         genre[x][4]
      var festivals = [
                      ["Reading",       "Richfield Avenue",  205,         "24th - 26th August",  "Rock"],
                      ["Park Life",     "Manchester",        140,         "8th - 9th June",      "Dance"],
                      ["Glastonbury",   "Somerset",          250,         "23rd - 25th June",    "Alternative"]
                      ];
      var filterfestivals = [[]];


      function filter(){
        filterfestivals = [[]];
      var maxuserprice = document.getElementById("maxprice").value;
        for (var i = 0; i < festivals.length; i++) {
            if (festivals[i][2] < maxuserprice){
                filterfestivals.push(festivals[i])
            }
        }
        alert(filterfestivals)
      }
      </script>
    </body>
</html>

Javascript For循环未按预期运行？

4 个答案: