Question

我正试图创建一个＆＃34; bar＆＃34;这是高亮的，并将返回一个值，其中包含突出显示的div框的数量。例如，当我突出显示5个div时，它应该返回5.当我继续，并突出显示另外6个框时，它应该返回6.所有突出显示的结果应该在数组中var x = ["5", "6",...];

这是一个小提琴https://jsfiddle.net/aepxqztL/3/

$(document).ready(function() {
  var $range = $('.range-bar').mousedown(function() {
    $(this).toggleClass('highlight');
    var flag = $(this).hasClass('highlight')
    $range.on('mouseenter.highlight', function() {
      $(this).toggleClass('highlight', flag);
    });
  });
  $(document).mouseup(function() {
    $('.range-bar').off('mouseenter')
  })
});

任何帮助将不胜感激。

Answer 1

以下是使用jQuery.each计算mousedown事件

时突出显示的div的示例

function calculateArray(){
  var x = [];
  $("div.range-bar").each(function( index, value ) {
    if($(this).hasClass("highlight"))
      x.push(index);
  });
  return x;
}

var x = [];
$(document).ready(function() {
  var $range = $('.range-bar').mousedown(function() {
    $(this).toggleClass('highlight');
    var flag = $(this).hasClass('highlight')
    $range.on('mouseenter.highlight', function() {
      $(this).toggleClass('highlight', flag);
    });
    x = calculateArray();
    console.log(x);    
  });
  $(document).mouseup(function() {
    $('.range-bar').off('mouseenter')
  })
});

参见工作演示：xor-zeroing also avoids a partial-register slowdown when reading eax after writing just al

Answer 2

您似乎需要设置2个全局变量（范围计数器rangeVal和数据数组dataSet），然后在每个方框上增加rangeVal mousedown然后将其添加到dataSet上的mouseup，然后重置rangeVal。

例如

var dataSet = []; //data array
var rangeVal = 1; //range counter

$(document).ready(function() {
  var $range = $('.range-bar').mousedown(function() {
    $(this).toggleClass('highlight');
    var flag = $(this).hasClass('highlight')
    $range.on('mouseenter.highlight', function() {
      $(this).toggleClass('highlight', flag);
      rangeVal++; //Increment on mousedown mouseenter in box
    });
  });

  $('.range-bar').mouseup(function() {
    $('.range-bar').off('mouseenter')
    dataSet.push(rangeVal); //add range counter to data array
    rangeVal = 1; //reset range counter
    $('.results p').text(dataSet.join()); //display data array in results div
  })
});

请看这个小提琴：https://jsfiddle.net/pavkr/0vftp5ja/1/

问题仍然有点模糊，但我认为这是你正在寻找的。

编辑： https://jsfiddle.net/pavkr/0vftp5ja/2/ 修改后保存Start和End值以及Range值。

返回突出显示的div的值

2 个答案: