Question

正如标题所示，我希望从范围输入 - （#inputValue）获得输出值，并且当范围值更改时立即获得输出值，它也将改变元素宽度（#box）。 / p>

我创建了“按钮”（#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

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

$("#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

1 个答案: