将变量值获取到 jQuery UI 调用中

Question

我正在使用 HTML/CSS/JavaScript/jQuery 为 Sketchup 插件创建 UI 调色板。调色板中有许多实例需要带有关联滑块的输入框，因此我决定使用 JavaScript 创建一个“类”，以便可以将它们标记出来。输入框/滑块组合之一的 HTML 如下所示：

<span>H:&nbsp;<input type="text" class="InputBox" id="reg_panel_spacing_h"></span>
<div class="SliderSpan" id="reg_panel_spacing_h_slider"></div><br/>

JavaScript 的相关部分如下所示：

$(document).ready(function() {

    function InputBoxJS (id, mi, ma, numtype, slider) {

        this.current_val = mi;
        this.element_id = id;
        this.minimum = mi;
        this.maximum = ma;

        var self = this;

        // string for selecting element using jquery
        jq_id = "#" + this.element_id;

        // slider code (if input box has associated slider)
        if(slider = true) {
            slider_jq_id = jq_id + "_slider" // id for selecting slider; assumes it's input id + "_slider"          

            $(slider_jq_id).slider({
                min: mi,
                max: ma,
                value: self.current_val,
                slide: function(event,ui) {
                    $(jq_id).val(ui.value); // PROBLEMATIC LINE
                    call_ruby("manipulate_data", self.element_id);
                }
            });
        } // if slider = true   
    }

    // create script objects for two input boxes
    var reg_panel_spacing_h = new InputBoxJS("reg_panel_spacing_h", 500, 50000, 0, true);
    var reg_panel_spacing_v = new InputBoxJS("reg_panel_spacing_v", 500, 50000, 0, true);

});

我遇到的问题是，当我使用此类创建两个输入框时（如上面的代码所示） ，两个滑块最终都与第二个输入框相关联。具体来说，上述代码中标记为有问题的 jq_id 变量最终对于两个输入框都被设置为“reg_panel_spacing_v”。奇怪的是，jq_id 在“问题线”上方的几行使用来设置 slider_jq_id，并在此处使用时按预期执行。

基本上似乎正在发生的事情是，包含“有问题的行”的函数在创建时与所有滑块的滑动事件相关联，并且它仅使用最近创建的输入框的 jq_id 。如果像这样更改“有问题的行”：

$(("#" + self.element_id)).val(ui.value);

问题就解决了。所以，我有一个解决方法。我只是希望有人能够向我解释到底发生了什么。

非常感谢！

乔什

Answer 1

尝试将变量设置为本地变量，如下所示：

var jq_id = "#" + this.element_id;

我怀疑如果不将其设置为本地变量，它就会获得解释“奇怪”行为的全局范围。