使用$(this)和DRY方法将值推入数组
Push value into array using $(this) with DRY approach jquery
我遇到了一些麻烦,找到一种方法,推到一个基于div数组。
我的目标是把我停留在每个元素上的时间加起来。相反,为每个div创建相同的函数。我想尝试DRY 方法。这很难想象。
我想改变数组我推到当我改变div。我已经找到了一种方法来添加所有的时间到一个数组。然而,这不是我的目标。
这是我的代码的一个非常缩短的版本,我附加一个柱塞,以显示它是如何工作的。在控制台中,您可以看到时间的变化。
http://plnkr.co/edit/zBRyix6TJjTjvp7OCrMC?p =
预览我正在推入timeArray。理想情况下,我可以输入panelHeading array或panelHeadingArray
这是我的iffe在 DRY 方法中使用。
var timeMonitering = (function() {
var mouseenterTime = 0;
var timeArray = [];
var navArray = [];
var panelHeadingArray = [];
return {
inAndOut: inAndOut
}
function inAndOut(evt) {
var currentTime = new Date();
var mouseoverTime;
if(evt.type === 'mouseenter') {
mouseenterTime = currentTime.getTime();
}
else if (evt.type === 'mouseleave') {
mouseoverTime =currentTime.getTime();
}
var time =mouseoverTime - mouseenterTime;
if(time >0) {
timeArray.push(time/1000);
}
console.log('time array added',Math.round(timeArray.reduce(add,0) ));
return time/1000;
}
function add(a,b) {
return a +b;
}
})();
$(document).on('ready', function() {
$('.navbar').bind('mouseenter mouseleave', timeMonitering.inAndOut);
$('.panel-heading').bind('mouseenter mouseleave', timeMonitering.inAndOut);
});
需要弄清楚如何推入navArray或panelHeadingArray
任何帮助都将是非常感激的。
*********更新****************
这就是我如何将每个数组的时间加起来的。
当我将鼠标悬停在元素上时,jumbotronArray会将秒数加起来。然而,我想重用这个函数,或者像我上面展示的那样。
var enteredTime = 0;
var jumbotronArray = [];
var listGroupArray = [];
$('.jumbotron').hover(function(evt) {
enteredTime = new Date();
console.log('e',enteredTime)
}, function() {
var ctime = new Date();
var time = (ctime.getTime() - enteredTime.getTime())/1000;
jumbotronArray.push(time);
console.log('time spend ' + time/1000 + 'sec');
console.log('jumbotronArray',jumbotronArray)
console.log('added',Math.round(jumbotronArray.reduce(add,0) ));
})
$('.list-group').hover(function(evt) {
enteredTime = new Date();
}, function() {
var ctime = new Date();
var time = (ctime.getTime() - enteredTime.getTime())/1000;
listGroupArray.push(time);
console.log('listGroupArray',listGroupArray)
console.log('listGroupArray added',Math.round(listGroupArray.reduce(add,0) ));
})
function add(a,b) {
return a +b;
}
您可以使用条件语句选择哪个数组,然后对其调用push。
var array;
if (condition) {
array = navArray;
} else {
array = panelHeadingArray;
}
array.push(...);
或者更简洁地使用三元操作符
(condition ? navArray : panelHeadingArray).push(...)
编辑:var enteredTime = 0;
var jumbotronArray = [];
var listGroupArray = [];
var mapping = {
".jumbotron": jumbotronArray,
".list-group": listGroupArray
};
Object.keys(mapping).forEach(function(selector) {
$(selector).hover(function(evt) {
enteredTime = new Date();
}, function() {
var ctime = new Date();
var time = (ctime.getTime() - enteredTime.getTime())/1000;
mapping[selector].push(time);
});
}
相关文章:
- javascript:更改应用到的数组的数组方法列表
- 使用Knockout.js的数组方法将地图标记添加到Google地图
- 模拟 javascript 的数组方法.面向对象的Javascript,作者:Stoyan Stefanov
- ECMA5 数组方法 - 查找数组中某个类型的第一个对象
- 在 Object.prototype 上为 NodeList 对象实现数组方法是否是一个很好的实践?
- 有没有一种方法可以实现chain.push和.shift数组方法
- 'document.getElementsByClassName' 的结果没有定义像 'map' 这样的数组方法,即使它
- JavaScript重写数组方法
- 有谁能告诉我在Shift的引擎盖下发生了什么吗?JavaScript中的Unshift()数组方法
- 如何删除数据库使用数组方法DELETE
- .push数组方法不工作角过滤器
- 包含数组方法的JavaScript函数没有返回期望的结果
- 对象/数组方法:修改原始的还是创建新的?指导方针
- 用自定义方法替换本机对象(数组)方法:是否安全?兼容的
- Javascript数组方法查找超过第一个值的indexOf
- 数组方法"some"的使用:收到意外的结果
- Javascript:使对象继承数组方法
- 使用数组方法遍历列表项
- 使用数组方法时返回方括号的函数
- 数组方法和连接函数组合输出在 javascript 中无法理解