如何獲取輸入字段的值並使用它來過濾數組？

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

問題是因為您沒有比較相同類型的值，所以需要將輸入的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);
});

小提琴的例子

另請注意，我將事件更改為在表單提交下運行。

Answer 2

這是因為輸入的Value是一個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 3

您要做的第一件事是創建帶有賦值的數組（這是一種不好的做法，除非您要使用全局變量或已經定義的局部變量）。 您必須使用不帶值的簡單填充數組：

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

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>

工作小提琴