主页 / 问题 / 905081
Accepted
Kobets Matviy
Asked:2020-11-11 21:16:51 +0000 UTC2020-11-11 21:16:51 +0000 UTC

如何在鼠标悬停时更改滑块值？

  • 772

input[type="range"]目标是当您将鼠标悬停在常规值上时，它会更改其值。
为此，我.mouseenter(function() {});通过 jQuery 使用了一个事件。

我附上现有的代码：

$('input[type="range"]').mouseenter( function() { 
  alert('Value = ' + $(this).val()); 
});
<input type="range" name="state" min="0" max="10" value="0" />

为什么单击时此代码会在 console.log 中输出过高的数量？！

var state = 0;  // нужен для сохранения значения
$('input[type="range"]').on('mouseenter mousemove', function(e) {
    $(this).val((e.pageX - $(this).offset().left) / ($(this).outerWidth() / 10));
    console.clear(); console.log($(this).val());

    $(this).on('click', function() {
      state = $(this).val();
      console.log(state);
    });
});

jquery

1 个回答

  1. Best Answer

    随它吧：

    var state = 0; // нужен для сохранения значения

/* На jQuery */

$('input[type="range"]').on('mouseenter mousemove', function(e) {
  $(this).val((e.pageX - $(this).offset().left) / ($(this).outerWidth() / 10));
  console.clear(); console.log($(this).val(), state);
});
$('input[type="range"]').on('click', function() {
  state = $(this).val();
  console.clear(); console.log($(this).val(), state);
});

/* На JS

var oRange = document.querySelector('input[type="range"]');

oRange.addEventListener('mouseenter', function(e) {
  this.value = (e.pageX - this.offsetLeft) / (this.offsetWidth / 10);
  console.clear(); console.log(this.value, state);
});
oRange.addEventListener('mousemove', function(e) {
  this.value = (e.pageX - this.offsetLeft) / (this.offsetWidth / 10);
  console.clear(); console.log(this.value, state);;
});
oRange.addEventListener('click', function(e) {
  state = this.value;
  console.clear(); console.log(this.value, state);;
});

*/
    input[name="state"] {
  display: block;
  margin: 50px auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" name="state" min="0" max="10" value="0" />

    • 2

相关问题