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)

我认为更符合您的要求。

希望有所帮助。

多个jquery滑块

1 个答案: