多个 jquery 滑块 [英] Multiple jquery sliders

问题描述

我正在为多个 jQuery 滑块而苦苦挣扎 -

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.

如果有 3 个滑块，每个设置为 500, 1000,1500，我将解释该场景，如果我将第一个滑块的值增加到 100(500+100)，那么应该从其他两个滑块减少 100(每个 50).

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

我检查了 http://jsfiddle.net/jenishkottaram/sNfBM/14/和 http://jsfiddle.net/Y5ZLL/400/ 但对我来说没有帮助.

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

非常感谢任何帮助.

谢谢

//滑块从这里开始

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 循环来动态显示滑块

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

推荐答案

$("#" + elementId)

这意味着给我一组只有一个元素的元素(ID 为 elementId 的那个)".

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

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

这意味着给我相同的集合(一个元素)，然后给我其中所有不是 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 :-)

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

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)

我认为这是你想要的.

希望对您有所帮助.

这篇关于多个 jquery 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！