Multiple jquery sliders

问题

I'm struggling with a multiple jQuery slider -

In this scenario if one slider increases the other sliders decreases accordingly. The sliders are creating dynamically. I tried many examples but there is no luck.

I will explain the scenario if there is 3 slider and each set to 500, 1000,1500 , if I increase the value of first slider to 100(500+100) then 100 should be reduced from the other two(50 each).

I checked http://jsfiddle.net/jenishkottaram/sNfBM/14/ and http://jsfiddle.net/Y5ZLL/400/ but no help in my case.

Any help should be greatly appreciated.

Thanks

//slider starts here

drawSlider: function(elementId, sliderMax, sliderVal, rate) {   

 $("#" + elementId).each(function() {
  $( this ).empty().slider({
        range: "max",
        min: 0,
        max: sliderMax,
        value: sliderVal,
        step: 100,
     slide: function(event, ui) {
        // Update display to current value
        $(this).siblings().text(ui.value);

        // Get current total
        var total = 0;

        $("#" + elementId).not(this).each(function() {
            total += $(this).slider("option", "value");
        });
   // Need to do this because apparently jQ UI
        // does not update value until this event completes
        total += ui.value;

        var max = sliderMax - total;

        // Update each slider
        $("#" + elementId).not(this).each(function() {

            var t = $(this),
                value = t.slider("option", "value");

            t.slider("option", "max", max + value)
                .siblings().text(value + '/' + (max + value));
            t.slider('value', value);
        });
    }});});},

I'm using a for loop to dynamically display the sliders

    for (i = 0; i < aBal.length; i++) {
        for (j = 0; j < balanceRange.length; j++) {
            if (aBal[i] == balanceRange[j]) {
                if (aCur[j] == activeCurrency) {
                    $('#account-wrapper-holder').append('<div class="account-wrapper">' +
                        '<h6>' + aName[j] + ':' + aNum[j] + '</h6>' +
                        '<p><span id="text-tot-allocate-value' + aName[j] + aNum[j] + '">Current cash balance: $' + balanceRange[j] + '</span>' +
                        '<span>Total to allocate:<input type="text" id="tot-allocate-value' + aName[j] + aNum[j] + '" value="' + balanceRange[j] + '" onchange="s.setValue(parseInt(this.value))"/></span></p>' +
                        '<div class="slider_class"><div class="cash-slider" id="slider-' + aName[j] + aNum[j] + '"></div>' +
                        '</div><span class="value">0</span><span class="var-account-total-balance" style="float:right;">$0</span></div>'
                    );
                                                                                       {

                    _this.drawSlider('slider-' + aName[j] + aNum[j] + '', sumOfCurrencyBalances, balanceRange[j], accountRate);

回答1:

$("#" + elementId)

That means "give me a set of elements with only one element (the one with an ID of elementId)".

$("#" + elementId).not(this)

That means "give me that same set (of one element), and then give me all the elements in it which are not this (ie. every element except the one that's actually in there).

So in other words, it's just an empty set, and that explains why your alerts showed that you weren't iterating through it ... it had nothing to iterate through :-)

I think what you maybe want to do instead is add some class (eg. "slider") on all your sliders (actually I think jQuery UI might do this for you, so you could just use whatever class they add). That way you could do:

$("." + thatClass).not(this)

which I think is more what you want.

Hope that helps.

来源：https://stackoverflow.com/questions/6986434/multiple-jquery-sliders

标签

jquery

slider