返回突出顯示的div的值

我正在嘗試創建一個突出顯示並且將返回包含突出顯示的div框數量的值的「欄」。例如，當我強調5個格，它應該返回5.當我繼續，並強調另有6個箱，它應該返回6.所有突出的結果應該是一個數組var x = ["5", "6",...];返回突出顯示的div的值

這裏有一個小提琴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') 
    }) 
});

任何幫助將不勝感激。

來源

2016-05-18 Justin Liwag

進度條怎麼樣？ – user2182349

考慮到這種情況，我認爲進度條並不適合。 –

您需要澄清用例。例如。前五個突出的DIV和接下來的六個之間有什麼區別？你是否點擊/拖動以突出顯示項目？這只是第一組點擊一堆，然後你點擊下一個按鈕「下一個」？ – PavKR

下面是一個使用jQuery.each計算在mousedown事件

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') 
    }) 
});

見工作演示高亮div的一個例子：https://jsfiddle.net/aepxqztL/7/

來源

2016-05-18 04:47:09

它不起作用。 –

您是否看到了工作演示？您可以在控制檯中看到x數組的輸出。 –

對不起評論。它確實有效，非常接近我正在尋找的東西。謝謝:) –

看起來你需要設置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/ 修改，以便它保存開始和結束值以及範圍值。

來源

2016-05-18 09:48:44 PavKR

是的，這是我正在尋找。非常感謝。但是你認爲我還可以檢索範圍的起始值和結束值嗎？意思是如果我突出顯示從0.5到2.5，我將能夠在單獨的數組中檢索0.5和2.5。此外，當我不再突出顯示div時，我希望它在數組中被刪除。 –

@JustinLiwag檢查這個小提琴，我已經修改它，以便它將開始，結束和範圍保存爲一個數組中的對象。 https://jsfiddle.net/pavkr/0vftp5ja/2/ – PavKR

很棒！非常感謝你.. –

返回突出顯示的div的值

回答

相關問題