我是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");
});
});
答案 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);
});
另请注意,我已将事件更改为在表单提交下运行。
答案 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>