javascript-使用jquery和html表单显示范围值

我已经使用范围输入html表单将表单包含在我的网站中,并且带有滑块.尽管默认情况下该范围不显示实际值,但我找到了一个脚本来显示显示内容,例如“卧室”和“浴室”.

附言当我使用php提交表单时,值是不同的.没关系.

希望显示器在每个卧室和浴室部分显示单独的“范围值”,而不是在移动滑块时显示相同的值.也许给它们两个单独的变量可以导致单独的输出？我怎样才能做到这一点？有人可以帮忙吗？

var range = $('.input-range'),
  value = $('.range-value');
value.html(range.attr('value'));
range.on('input', function() {
  value.html(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form id="form" name="form" method="post" target="formfill" action="form-to-email.php">
  
      <div class="field">
        <label for="Bedrooms">Bedrooms</label>
      </div>
      <div class="range-slider">
        <input class="input-range" type="range" value="1" min="0" max="10">
      </div>
      <span class="range-value"></span>
      <div class="field">
        <label for="bathrooms">Bathrooms</label>
      </div>
      <div class="range-slider">
        <input class="input-range" type="range" value="1" min="0" max="10">
      </div>
      <span class="range-value"></span>

</form>

解决方法:

问题在这里：

range.on('input', function() {
  // this sets the html content of all elements with class range-value
  // to the value of the slider that is being moved
  value.html(this.value);
});

我正在显示的修复程序只是将span标签移动到div中,这只是知道.range-value属于女巫滑块的一种方式.

另外,由于value =“ 1”被硬编码到范围滑块中,因此您也可以使span标签以相同的值< span class =“ range-value”< 1< / span>开头.

$('.input-range').on('input', function() {
  $(this).next('.range-value').html(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="range-slider">
  <input class="input-range" type="range" value="1" min="0" max="10">
  <span class="range-value">1</span>
</div>

<div class="range-slider">
  <input class="input-range" type="range" value="1" min="0" max="10">
  <span class="range-value">1</span>
</div>

我已经从答案中删除了CSS和大多数HTML,因为它与问题无关,但可以看到它以完整格式here is a demo运行

标签：html-form,javascript,jquery
来源： https://codeday.me/bug/20191028/1953073.html