Question

我的代码是for循环，它创建了5个唯一的HorizontalSliders：

for(var i = 0; i < 5; i++){
    dom.byId('ui').innerHTML += '<div id="slider_' + i + '"></div>';
    var slider = new HorizontalSlider({
        value: 100,
        minimum: 0,
        maximum: 100,
        style: 'width:300px;'
    }, 'slider_' + i);
    slider.startup();
}

但是，只有最后创建的HorizontalSlider才能正常运行。

其他HorizontalSliders甚至不会滑动，更不用说听一个onChange事件，如果我给它一个。

为什么会这样？

Answer 1

dojo中的所有dijit都有一个placeAt(domnonde)方法，您可以在其中直接使用每个实例化的滑块。（placeAt在param中同时包含domeNode或string id）见下面的工作片段：

＆＃13;

require([
  "dijit/form/HorizontalSlider",
], function(
  HorizontalSlider
) {

  for (var i = 0; i < 5; i++) {
    
    var slider = new HorizontalSlider({
      value: 100,
      minimum: 0,
      maximum: 100,
      style: 'width:300px;'
    }).placeAt("ui");
    slider.startup();
  }

});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />

<body class="claro">
  <div id="ui"></div>
</body>

＆＃13;

Answer 2

<强>更新：

我在问题根源上错了，所以我改变了“为什么”部分答案，但我会在这里留下代码，因为它正在工作并解决了问题。

require([
    "dijit/form/HorizontalSlider",
    "dojo/dom",
    "dojo/domReady!"
], function (
  HorizontalSlider, 
  dom
){

  var sliders = [1, 2, 3, 4, 5]

  var getSlider = function(i) {
    return new HorizontalSlider({
                value: 100,
                minimum: 0,
                maximum: 100,
                style: 'width:300px;'
            });
  }

  var placeAndStart = function (s) {
    s.placeAt('ui');
    s.startup();
  }

  sliders.map(getSlider).forEach(placeAndStart)

});

Js Fiddle example

Dojo HorizontalSliders在后续实例化时失去功能

2 个答案:

Dojo Horizo​​ntalSliders在后续实例化时失去功能

2 个答案:

Dojo HorizontalSliders在后续实例化时失去功能