Question

我使用以下脚本，有多个jQuery UI滑块，总计：Combined total for multiple jQuery-UI Sliders

现在我想在页面加载时从一个滑块开始，单击一个按钮后我想添加另一个应该包含在计算中的滑块。但不幸的是，通过我的方法，当我添加一个新滑块时，第一个滑块获得值NaN，当我尝试移动它时，我收到以下错误Uncaught TypeError: Cannot read property 'addClass' of undefined。

当我从一开始就包含多个滑块（通过PHP）时，它可以正常工作。

这是html结构：

<div class="form-group taskType">
     <label for="TaskType32" class="col-sm-4 control-label">Aufgaben Art</label>
           <div class="col-sm-8">
              <select class="form-control" id="TaskType32" name="type[]">
                  <optgroup label="DESIGN">
                      <option value="photoshop">PHOTOSHOP</option>
                      <option value="recherche">RECHERCHE</option>
                   </optgroup>
             </select>
             <div class="rangeSliderContainer">
                 <div class="slider">100</div>
                 <span class="value">100</span>%
             </div>
             <input type="hidden" class="hiddenPercentage" name="percentage[]" value="100">
        </div>
</div>

这是我的方法：

1。）我先克隆元素

clonedTaskAdd = $('.createfinishedTask .taskType').clone();

2.）然后我初始化滑块功能

manageSliders();

function manageSliders() {
    var sliders = $(".rangeSliderContainer .slider");
    var availableTotal = 100;

    sliders.each(function() {
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,
            min: 0,
            max: availableTotal,
            range: "max",
            step: 2,
            animate: 0,
            slide: function(event, ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);
                $(this).parent().next('.hiddenPercentage').val(ui.value);

                // Get current total
                var total = 0;

                sliders.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 delta = availableTotal - total;

                // Update each slider
                sliders.not(this).each(function() {
                    var t = $(this),
                        value = t.slider("option", "value");

                    var new_value = value + (delta/2);

                    if (new_value < 0 || ui.value == 100)
                        new_value = 0;
                    if (new_value > 100)
                        new_value = 100;

                    t.siblings('.value').text(new_value);
                    t.slider('value', new_value);
                    t.parent().next('.hiddenPercentage').val(new_value);
                });
            }
        });
    });
}

3.。）点击按钮，我更改克隆的值并附加

$('.createfinishedTask').on('click', '.rangeTrigger', function(e) {
        e.preventDefault();
        addSlider();
    });


function addSlider() {
    clonedTaskAdd.find('.slider, .value').text('0');
    clonedTaskAdd.find('.hiddenPercentage').val('0');
    clonedTaskAdd.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clonedTaskAdd);
    manageSliders();
}

因此，在我调用manageSliders();函数中的最后一个addSlider()后，问题就出现了。但我不知道如何将新添加的滑块包含在总计算中。

FIDDLE

随时询问您是否需要更多信息。谢谢！

Answer 1

问题是初始化滑块的代码。您从现有滑块中提取文本值，但该滑块的DOM已更改，因此您获得NAN值。

我做的主要改变是：http://jsfiddle.net/TrueBlueAussie/p5ty5wbv/3/

    // This value comes from the text element, but only if not converted to a slider
    if ($this.find('.ui-slider-handle').length) {
        var init_value = $this.slider("option", "value");
    } else {
        var init_value = ~~$this.text();
    }

我还更改了克隆以使用克隆克隆，因此重用元素的问题就会消失：

function addSlider() {
    var clone = clonedTaskAdd.clone();
    clone.find('.slider, .value').text('0');
    // clonedTaskAdd.find('.slider').text('0');
    clone.find('.hiddenPercentage').val('0');
    var rand = makeid();
    clone.find('label').attr('for', rand);
    clone.find('select').attr('id', rand);
    clone.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clone);
    // $('.createfinishedTask .taskType').last().find('.slider').slider();
    manageSliders();
}

其他小调整是我开始添加临时变量而不是重新jquerying元素和使用~~而不是parseInt（更快和更短的整数截断）。

克隆的UI Slider元素在动态添加时会导致错误

1 个答案: