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

Question

我在寻找一种方法来推入基于 div 的数组时遇到了一些麻烦。

我的目标是将我悬停在每个元素上的时间加起来。而不是为每个 div 创建相同的函数。我想尝试 DRY 方法。这很难形象化。

我想在更改 div 时更改要推入的数组。我想出了一种将所有时间添加到一个数组中的方法。然而这不是我的目标。

这是我的代码的一个非常简短的版本，我附上了一个 plunker 来展示它是如何工作的。在控制台中可以看到时间的变化。

http://plnkr.co/edit/zBRyix6TJjTjvp7OCrMC?p=preview

我正在推入 timeArray。理想情况下，我可以推入 panelHeading 数组或 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;
    }

Answer 1

您可以select which array using a conditional 然后在其上调用 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);
  });
}

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

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

javascript

jquery

dry