多个 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)

这意味着“给我一组只有一个元素的元素（ID 为 elementId 的那个）”。

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

这意味着“给我相同的集合（一个元素），然后给我其中所有不是 this 的元素（即除了实际存在的元素之外的每个元素） .

换句话说，它只是一个空集，这就解释了为什么你的警报显示你没有迭代它......它没有任何东西可以迭代:-)

我认为您可能想要做的是在所有滑块上添加一些类（例如“滑块”）（实际上我认为 jQuery UI 可能会为您执行此操作，因此您可以使用它们添加的任何类）。这样你就可以做到：

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

我认为这是你想要的。

希望对您有所帮助。