Question

我正在尝试编写一些代码来使用滑块动态更改文本的大小，但是它不起作用。

$('input').on('change', function() {
  var v = $(this).val();
  $('.userText p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" min="1.2" max="2.6" step=".2" id="slider" />
<div class="userText">
  <p>Some text that should dynamically change size</p>
</div>

有人可以在这里提供任何建议吗？

Answer 1

更改事件将在您释放鼠标按钮时立即触发。您想要的是 oninput 事件，该事件将在您移动滑块时立即触发。

$('input').on('input', function() {
  var v = $(this).val();
  $('p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1.2" max="2.6" step=".2" id="slider" />

<p>Some text that should dynamically change size</p>

Answer 2

您的演示效果很好。但是，一旦释放滑块，就会应用新的值。
如果要立即更新值，请使用input事件而不是change事件：

$('input').on('input', function() {
    var v = $(this).val();
    $('p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1.2" max="2.6" step=".2" id="slider" />

<p>Some text that should dynamically change size</p>

不同之处在于，通过用户界面更改值时，发生input。
另一方面，当元素的状态更改时，change被触发。

Answer 3

只需添加input作为事件，而change仅在释放鼠标时才会触发。我还添加了更小的步骤，并为min设置了起始值，以提高可用性。

$('input').on('input change', (e) => {
  $('p').css('font-size', $(e.target).val() + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
<p>Some text that should dynamically change size.</p>

有关不同浏览器之间差异的更多信息，请参见onchange event on input type=range is not triggering in firefox while dragging

如何使用滑块更改文本大小？

3 个答案: