使用 jQuery 范围输出值的实时元素宽度

Question

正如标题所说，我想从范围输入中获取输出值 - (#inputValue) 并且当范围值更改时，它也会立即更改元素宽度 (#box) .

我已经创建了 "button" (#buttonToApply) onclick 函数，它可以正常工作，但是在更改值以应用新宽度后需要单击按钮。

/* This one work, after clicking button */
$("#buttonToApply").click(function(){
$("#box").width($("#inputValue").val() + "px");  
});
/* This one doesn't, real time */
$("#box").width($("#inputValue").val() + "px");

#box {
  background: orange;
  width: 200px;
  height: 200px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<center>
  <input id="inputValue" type="range" min="100" max="300" step="50">
<br/><br/>
  <button id="buttonToApply">change width</button>
<br/><br/>
  <div id="box"></div>
  
</center>

Answer 1

为此，您需要运行在范围滑块的 change 事件下设置 div 宽度的代码，如下所示：

$("#buttonToApply").click(function() {
  $("#box").width($("#inputValue").val() + "px");
});

$('#inputValue').change(function() {
  $("#box").width($(this).val() + "px");
});

#box {
  background: orange;
  width: 200px;
  height: 200px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<center>
  <input id="inputValue" type="range" min="100" max="300" step="50"><br/><br/>
  <button id="buttonToApply">change width</button><br/><br/>
  <div id="box"></div>
</center>

此外，仅供参考，<center> 标签已被弃用。您现在应该在 CSS 规则中设置 text-align。

使用 jQuery 范围输出值的实时元素宽度

Real time element width using range output value in jQuery

jquery

element

width