使用$(this)和DRY方法将值推入数组

Push value into array using $(this) with DRY approach jquery

本文关键字:数组 方法 DRY this 使用      更新时间:2023-09-26

我遇到了一些麻烦,找到一种方法,推到一个基于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);
  });
}