如何获取输入字段的值并使用它来筛选数组

How do I take the value of an input field and use it to filter an array?

本文关键字：数组 筛选 何获取 获取 字段 输入      更新时间：2023-09-26

我是javascript的新手。我希望输入到输入字段中的值用于评估从数组中筛选出的内容："e"。我不明白我做错了什么。我尝试了很多不同的东西，所以我认为我只是犯了一些语法错误？请帮帮我。

html:

<div id="main_container">
    <div id="content_container">
        <form id="form">
            <input id="input"></input>
            <button id="button">button</button>
        </form>
    </div>
</div>

js:

function Employee (name, salary, gender) {
    this.name = name;
    this.salary = salary;
    this.gender = gender;
}
var e = [
Matt = new Employee("Matt", 100, "Male"),
Alex = new Employee("Alex", 200, "Male"),
Zack = new Employee("Zack", 300, "Male"),
Mark = new Employee("Mark", 400, "Male"),
Rick = new Employee("Rick", 500, "Male"),
];

$('#button').on('click', function () {
    e.filter(function (e) {
        return e.salary >= $('#input').val();
    }).map (function (e) {
        return e.name;
        console.log("asdf");
    });
});

问题是因为您没有比较相同类型的值，所以需要将输入的val()解析为整数。在那之后，您实际上不会对map()的结果执行任何操作，并且那里的处理程序中的console.log永远不会像返回语句之后那样命中。试试这个：

$('#form').on('submit', function (event) {
    event.preventDefault();
    var filterVal = parseInt($('#input').val(), 10);
    var filtered = employees.filter(function (e) {
        return e.salary >= filterVal;
    }).map(function (e) {
        return e.name;
    });
    console.log(filtered);
});

小提琴示例

另外请注意，我已将事件更改为在表单提交下运行。

这是因为输入值是string，但您正在进行int比较。使用parseInt使比较生效。

function Employee (name, salary, gender) {
    this.name = name;
    this.salary = salary;
    this.gender = gender;
}
var e = [
Matt = new Employee("Matt", 100, "Male"),
Alex = new Employee("Alex", 200, "Male"),
Zack = new Employee("Zack", 300, "Male"),
Mark = new Employee("Mark", 400, "Male"),
Rick = new Employee("Rick", 500, "Male"),
];
$('#button').on('click', function () {
    e.filter(function (e) {
        return e.salary >= parseInt($('#input').val());
    }).map (function (e) {
        console.log("asdf: " + e.name);
        return e.name;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
    <div id="content_container">
        <form id="form">
            <input id="input"></input>
            <button id="button">button</button>
        </form>
    </div>
</div>

您要做的第一件事是创建带有赋值的数组（这是一种糟糕的做法，除非您想使用全局变量或已经定义的局部变量）。您必须简单地用值填充数组而不进行赋值：

var e = [
new Employee("Matt", 100, "Male"),
new Employee("Alex", 200, "Male"),
new Employee("Zack", 300, "Male"),
new Employee("Mark", 400, "Male"),
new Employee("Rick", 500, "Male"),
];

第二个是jquery函数.val()返回字符串，而不是数字。所以您必须将输入值解析为数字：

var salary = parseInt($('#input').val(), 10);

访问DOM很慢，所以尽量少用DOM：

$('#button').on('click', function () {
    //Access input field once and parse it to float number.
    var salary = parseFloat($('#input').val(), 10);
    e.filter(function (e) {
        return e.salary >= salary;
    }).map (function (e) {
        return e.name;
        console.log("asdf");
    });
});

您的代码中没有太多错误，只是您需要对$（'#input'）.val（）执行parseInt，仅此而已，并具有console.log的正确位置。

JS代码：

function Employee(name, salary, gender) {
    this.name = name;
    this.salary = salary;
    this.gender = gender;
}
var e = [
Matt = new Employee("Matt", 100, "Male"),
Alex = new Employee("Alex", 200, "Male"),
Zack = new Employee("Zack", 300, "Male"),
Mark = new Employee("Mark", 400, "Male"),
Rick = new Employee("Rick", 500, "Male"),
];
$('#button').on('click', function (elm) {
    var sal = parseInt($('#input1').val());
    var arr = e.filter(function (e) {
        return e.salary >= sal;
    }).map(function (e) {
        return e.name;
    });
    console.log(arr);
});

HTML:

<div id="main_container">
    <div id="content_container">
        <input id="input1"></input>
        <button id="button">button</button>
    </div>
</div>

工作Fiddle

相关文章：