Несколько слайдеров JQuery

Question

Я борюсь с несколькими ползунками jQuery -

В этом сценарии если один ползунок увеличивается, другие ползунки соответственно уменьшаются .Ползунки создаются динамически.Я перепробовал много примеров, но безуспешно.

Я объясню сценарий, если есть 3 ползунка и каждый установлен на 500, 1000, 1500, если я увеличу значение первого ползунка до 100 (500 + 100) затем 100 следует уменьшить по сравнению с двумя другими (по 50).

Я проверил http://jsfiddle.net/jenishkottaram/sNfBM/14/ и http://jsfiddle.net/Y5ZLL/400/, но в моем случае никакой помощи не было.

ЛюбойСправка приветствуется.

Спасибо

// здесь начинается слайдер

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

Я использую цикл for для динамического отображения слайдеров

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

Answer 1

$("#" + elementId)

Это означает, что «дай мне набор элементов только с одним элементом (один с идентификатором elementId )».

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

Это означает, «дай мнетот же набор (из одного элемента), а затем дать мне все элементы в нем, которые не это (т. е. каждый элемент, кроме того, который на самом деле там).

Так что вДругими словами, это просто пустой набор, и это объясняет, почему ваши оповещения показали, что вы не проходили через него ... в нем не было ничего для просмотра: -)

Я думаю, что вы, возможно, захотите сделатьвместо этого добавьте некоторый класс (например, «slider») на все ваши ползунки (на самом деле я думаю, что jQuery UI мог бы сделать это для вас, так что вы можете просто использовать любой класс, который они добавляют). Таким образом, вы можете сделать:

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

что, я думаю, больше того, что вы хотите.

Надеюсь, это поможет.