Question

我有这个代码，它有一组divs，可以通过在这些框上单击并拖动鼠标来突出显示。每个框表示一个增量为5的值。例如，第1个框为0.5，第2个框为1，依此类推。当您突出显示div时，它将返回一个包含突出显示值的数组。

如果我有预设值。 E.g var x = [0.5, 1, 1.5, 2, 5, 5.5];。我如何突出显示与divs

中的值匹配的array x

var x = [0.5, 1, 1.5, 2, 5, 5.5]; Image of what I'm trying to achieve

以下是代码：

function calculateArray() {
  var x = [];
  $("div.range-bar").each(function(index, value) {
    if ($(this).hasClass("highlight"))
      x.push(0.5 + index / 2);
  });
  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);
    });


  });
  $(document).mouseup(function() {
    $('.range-bar').off('mouseenter');
    x = calculateArray();
  });
});

Answer 1

function calculateArray() {
  var x = [];
  $("div.range-bar").each(function(index, value) {
    if ($(this).hasClass("highlight"))
      x.push(0.5 + index / 2);
  });
  return x;
}
var x = [0.5, 1, 1.5, 2, 5, 5.5];

$(document).ready(function() {
var arr = x.toString().split(',');

$.each(arr,function(i){

   var double="";
   var double=parseFloat(arr[i])+parseFloat(arr[i]);

   $("div.range-bar:nth-child("+double+")").toggleClass('highlight');
});
  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');
    x = calculateArray();
  });
});

预先突出显示一组div

1 个答案: