Question

我有这个JQuery代码试图在for循环中创建JQuery滑块 -

function initSliderUI(){
    $('.opt-range-slider').each(function(){
        $this = $(this);
        elementId = $this.attr('id');
        filterUIObj = getFilterUIObjFromOptionId(elementId);
        filterName = filterUIObj.getAttribute('data-filter-name');
        addSliderUI(filterName, elementId, getSliderFilterRangeArray(filterName));
    });
}
//this is not working due to binding problems
function addSliderUI(type, elementId, dataArray){
    filterUIObj = getFilterUIObjFromOptionId(elementId);
    filterUIObj.data[1].data[0].data[0].data[0].setData(dataArray[0] + ' - ' + dataArray[dataArray.length-1]);
    $('#'+elementId).slider({
        range: true,
        min: 1,
        max: dataArray.length,
        step: 0.001,
        values: [1, dataArray.length],
        change: function (event, ui) {
            if(dataArray.length > 1){
                $filteredRows = applyRangeFilter(type, dataArray[Math.round(ui.values[0])-1], dataArray[Math.round(ui.values[1])-1]);
                toggleApplicantFilteredRows($filteredRows);
                //problem is in this line below (filterUIObj)
                filterUIObj.data[1].data[0].data[0].data[0].setData(getSliderFilterRangeText(type, dataArray[Math.round(ui.values[0])-1], dataArray[Math.round(ui.values[1])-1]));
            }
        },
        slide: function (event, ui) {
            //problem is in this line below (filterUIObj)
            filterUIObj.data[1].data[0].data[0].data[0].setData(getSliderFilterRangeText(type, dataArray[Math.round(ui.values[0])-1], dataArray[Math.round(ui.values[1])-1]));
        },
        start: function (event, ui) {},
        stop: function (event, ui) {}
    });
}

在我的循环中，我正在使用类＆＃39; opt-range-slider＆＃39;并将它们绑定到jquery的Slider（..）小部件。这样做的时候，我传递了一些自定义类对象＆＃34; filterUIObj＆＃34;。该对象在initSliderUI（...）中正确传递。但是当我滑动我的滑块时，无论发生什么应该发生在＆＃34; slide：function（event，ui）{...}＆＃34;发生在最后一次＆＃34; filterUIObj＆＃34;循环中的对象。

所以，假设我只有2个滑块。当我滑动第一个滑块时，数据正在第二个滑块文本中更新。

我哪里错了？有工作吗？我无法单独绑定它们，因为具有滑块的对象数量是在运行时决定的，因此它必须适用于每个循环。

编辑 - 添加了一些帮助函数

function getFilterUIObjFromOptionId(optId){
    return generatedIds[$('#'+optId).closest('.filter').attr('id')];
}

Answer 1

在Javascript中，未使用var声明的所有变量都成为顶级全局变量。当用var声明时，它们变为功能范围。

没有任何有用的情况你想在函数体中声明全局变量，所以省略var几乎总是一个错误。它导致不同的函数都写入同一个变量，通常不会很好地结束。

像jshint这样的静态分析器（也可用作online tool）会指出错误。您应养成使用此类工具检查代码是否存在可避免错误的习惯。

循环中JQuery绑定出错了

1 个答案: