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

时间:2015-02-09 19:20:02

标签: javascript jquery arrays function object

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

4 个答案:

答案 0 :(得分:1)

问题是因为您没有比较相同类型的值,您需要将输入的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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

你要做的第一件事是创建带有分配的数组(这是不好的做法,除非你想使用全局变量或已经定义了本地变量)。您必须使用不带分配的值简单填充数组:

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

答案 3 :(得分:0)

您的代码没有太大问题,只需要在$(&#39; #input&#39;)。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