从输入值设置默认 css 宽度答案

【问题标题】：Set default css width from input value从输入值设置默认 css 宽度
【发布时间】：2017-11-29 14:41:13
【问题描述】：

我正在使用 jQuery ui 滑块来更改 div 的宽度。我有滑块设置并正常工作，以便当用户移动滑块时 css 会发生变化。

我还设置了我的滑块，使其手柄位置默认为输入值。

我想要实现的是在页面加载时，让 css 宽度与滑块处理位置创建的值相匹配。

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>

CSS

.boxout {

width: 200px;
height: 200px;
}

.box {

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

JQUERY

$(".slider").slider({
min: 0,
max: 10,
slide: function (event, 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());
}
});

JSFIDDLE

http://jsfiddle.net/yLanxgrs/

【问题讨论】：

css宽度是多少？
$(".box").css('width')
哦，抱歉我没在HTML看到它
@Zvezdas1989 没关系。你知道如何实现吗？
给我一点时间思考一下。

标签： jquery css jquery-ui

【解决方案1】：

可以调用滑块的slide事件，传入当前值：

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

更新小提琴：http://jsfiddle.net/yLanxgrs/2/

或者，将幻灯片事件的内容移动到新函数并在那里进行更新。

【讨论】：

【解决方案2】：

您需要将此添加到您的创建方法中：

$(".box").css('width',(10+($(this).slider('value')*2)) + '%');

小提琴：http://jsfiddle.net/7w57dshu/

【讨论】：

谢谢！这也有效，另一个用户首先发布，所以我将答案标记为正确。非常感谢您的宝贵时间

【解决方案3】：

您可以使用常规 jQuery 在滑块外部调用它。只需获取输入值并在页面加载时使用它：

$(".box").css('width',(10+($('.inputNumber').val()*2)) + '%');

这是一个JS Fiddle 示例

【讨论】：

谢谢！这也有效，其他用户先发布，所以我将答案标记为正确。非常感谢您的宝贵时间
@JoelRosen 如果有帮助，您可以对多个答案进行投票