如何获取输入字段的值并使用它来过滤数组？

Question

我是 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");
    });
});

Answer 1

这是因为输入值是 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>

Answer 2

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

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()returns字符串，不是数字。因此，您必须将输入值解析为数字：

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

Answer 3

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

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

Example fiddle

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

Answer 4

您的代码没有太多错误，只是您需要在 $('#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>

Working Fiddle

如何获取输入字段的值并使用它来过滤数组？

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

javascript

arrays

jquery

function

object