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

尝试将变量设为local，如下所示：

var jq_id = "#" + this.element_id;

我怀疑，如果没有将其置于本地，它将获得解释“奇异”行为的全球范围。

将变量值转换为jQuery UI调用

1 个答案: