javascript - JQuery 绑定(bind)在循环中出错

Question

我有这个 JQuery 代码，尝试在 for 循环中创建 JQuery slider -

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

在我的循环中，我采用了一些带有“opt-range-slider”类的元素，并将它们绑定(bind)到 jquery 的 Slider (..) 小部件。这样做时，我传递了一些自定义类对象“filterUIObj”。该对象在 initSliderUI(...) 中正确传递。但是当我滑动 slider 时，“slide: function (event, ui) {...}”中应该发生的任何事情都发生在循环中的最后一个“filterUIObj”对象上。

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

我哪里出错了？有解决办法吗？我无法单独绑定(bind)它们，因为具有 slider 的对象数量是在运行时决定的，因此必须针对每个循环。

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

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

Answer 1

在 Javascript 中，所有未使用 var 声明的变量都将成为顶级全局变量。当用 var 声明时，它们就成为函数作用域。

在任何情况下，您都不会希望在函数体内声明全局变量，因此省略 var 几乎总是一个错误。它会导致不同的函数都写入同一个变量，并且通常不会有好的结果。

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