HTML/CSS/JavaScript/jQuery を使用して、Sketchup プラグイン用の UI パレットを作成しています。パレット内には、スライダーに関連付けられた入力ボックスを必要とするインスタンスが多数あるため、JavaScript を使用して「クラス」を作成し、それらを削除できるようにすることにしました。入力ボックス/スライダー コンボの 1 つの HTML は次のようになります。
<span>H: <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);
});
私が抱えている問題は、このクラスを使用して 2 つの入力ボックスを作成すると (上記のコードに示すように)、両方のスライダーが 2 番目の入力ボックスに関連付けられることです。具体的には、上記のコードで問題があるとフラグ付けされた jq_id 変数は、両方の入力ボックスで「reg_panel_spacing_v」に設定されてしまいます。奇妙なのは、jq_id が「問題のある行」の数行上で使用されて、slider_jq_id を設定し、そこで使用すると期待どおりに動作することです。
基本的に、「問題のある行」を含む関数は、作成時にすべてのスライダーのスライド イベントに関連付けられ、最後に作成された入力ボックスの jq_id のみを使用するようです。「問題のある行」を次のように変更する場合:
$(("#" + self.element_id)).val(ui.value);
問題は修正されました。だから、私は回避策を持っています。誰かが何が起こっているのかを正確に説明してくれることを願っています。
どうもありがとう!
ジョシュ