javascript - 使新元素匹配幻灯片 ui 设置

Question

我有一个 jQuery slider ，它正在修改幻灯片上的 div css。一切正常，但是当我添加一个新的 div 时，在再次移动 slider 之前， slider 的设置不会附加到新的 div。

HTML

<div class="inputWrap hidden">
  <input class="inputNumber" type="text" value="5">
  <div class="slider"></div>
</div>

<div class="boxout">
  <div class="box"></div>
</div>

<div class="add">
  add box
</div>

CSS

.boxout {

width: 200px;
height: 200px;
}

.box {

width: 10%;
height: 10%;
background: black;
}

JQUERY

$(".slider").slider({
  min: 0,
  max: 10,
  slide: function(event, ui) {
    console.log("slide", ui);
    $(".box").css("width", 10 + ui.value * 2 + "%");
    $(this)
      .parent()
      .find(".inputNumber")
      .val(ui.value);
  },
  create: function(event, ui) {
    $(this).slider(
      "value",
      $(this)
        .parent()
        .find(".inputNumber")
        .val()
    );
  }
});

var slider = $(".slider");
slider
  .slider("option", "slide")
  .call(slider, null, { value: slider.slider("value") });

$(".add").click(function() {
  $(".boxout").append('<div class="box"></div>');
});

fiddle

在这个 fiddle 中，您可以看到我如何完美地设置所有内容，但是当添加新的 div 时，它与上面的框不匹配，直到再次使用 slider

http://jsfiddle.net/or5fhsvh/1/

感谢您的帮助。

Answer 1

要实现您想要的效果，您需要修改 .add 类上的 click 函数。

$(".add").click(function() {
 var slideValue = parseInt($('.inputNumber').val());
 var boxWidth = (10+(slideValue*2)) + '%';
 $(".boxout").append('<div class="box" style="width:'+boxWidth+'"></div>');
});

它将获取 slider 的值，计算所需的框宽度，然后将该框附加到 UI 中。这样，对于您添加的关于 slider 值的所有框，宽度都保持不变。而且您无需滑动 slider 即可反射(reflect)该更改。

这是工作 JSFIDDLE