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

2019-10-28 14:34:10 阅读：200 来源： 互联网

我已经使用范围输入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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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