Question

I’ve got an array of values that i’m using to create list items that I then append to an ordered list.

What i want to to is create a click function that passes the sum of those values based on the order of the items in the list (ie if you click on the 3rd item in the list it totals all the preceeding values and passes that sum to a variable.

Answer 1

So just loop over your array, summing the values. We only really need to know intIndex to do this, not objValue.

var jList = $("#bargraph ul").addClass('bars');

// for each item in your array, create an LI
$.each(datas,function(intIndex, objValue){
    var intSum = 0, i = 0;

    for (i; i < intIndex; i++) {
        // just to make sure you don't try and access an array value out of bounds
        if (i >= datas.length) {
            break;
        }

        intSum += datas[intSum];
    }

    jList.append($("<li>"+"</li>").addClass('bar'+intIndex).css('height', objValue).attr('data-sum', intSum));
});

// for each LI, add an event listener
$("#bargraph li").on('click', function(e) {
    // here's your value
    currentSlide = $(this).attr('data-sum');
});

In retrospect, there’s better ways to do it. I’d rather move all the logic to the event listener for calculating the sum. In which case you could use the jquery selector to get the array of all the LIs, loop over them until you reach the current one, summing their height attributes. But for now, this should work.