Question

我有一个jQuery滑块正在修改幻灯片上的div css。一切都工作得很好，但是当我添加一个新div时，滑块中的设置没有附加到新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

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

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

感谢您的帮助。

Answer 1

要实现您的目标，您需要修改click课程上的.add功能。

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

它将获取滑块的值，计算所需的框宽度，然后在UI中附加该框。这样，相对于滑块值，您要添加的所有框都保持宽度。而且您无需滑动滑块即可反映该更改。

这是工作JSFIDDLE

Answer 2

你的添加功能只创建了一个块，并没有将样式应用于它。而所有其他街区都有他们的盒子类＃39;内联样式覆盖宽度。

您可以将添加功能更改为

const options = [
    {id: 1, componentClass: ComponentOne},
    {id: 2, componentClass: ComponentTwo}
];

export class MyView extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        return(
            <div>
                {
                  options.map(obj => {
                    const Class = obj.componentClass;

                    return <Class />;
                  })
                }
            </div>
        )
    }
}

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

2 个答案: