Question

问题：

我有四个范围滑块（来自https://rangeslider.js.org），我希望在我的HTML文档中激活它，但我想避免四次复制/粘贴相同的JS代码。有没有办法告诉JS我希望对所有滑块应用此功能？

背景（HTML）：

每个滑块具有三个组成部分
1）第一个是实际滑块显示的位置（＃judgementslider1 ）

<input id="judgementslider1" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider>

2）当有人滑动范围滑块时，将显示一个整数（＃output1 ）

<output class="my-3" id="output1"></output>

3）最后，将滑块值更新为隐藏的输入字段（＃j1 ）

<input type="hidden" id="j1" name="j1" value="">

问题：

如何重写JS代码以考虑所有滑块（＃judgementslider1，＃judgementslider2，＃judgementslider3，＃judgementslider4），并同时将此编号应用于输出（＃output1，＃output2，＃output3，＃ output4）和隐藏的输入字段（＃j1，＃j2，＃j3，＃j4）？

最小工作示例（MWE）：

https://codepen.io/constituo/pen/qzKOyW

Answer 1

尝试这样。

我添加了一个id数组并对其进行循环，然后传递给函数valueOutput以生成output并设置hidden值。

然后，我向该滑块输入添加了一个ids属性。

然后在进行更改时，我获得了目标元素数据并传递给函数valueOutput以生成值。

$(function() {
  var $document = $(document);
  var selector = [ 'judgementslider1', 'judgementslider2', 'judgementslider3', 'judgementslider4' ];
  /** * Example functionality to demonstrate a value feedback * and change the output's value. */
  function valueOutput(elem, i) {
    var element = $('#'+elem); 
    var value = element.val();
    var j = +i+1;
    var output = document.getElementById('output'+j);
    var input = document.getElementById('j'+j);
    output.innerHTML = value;
    input.value = value;
    element.rangeslider({
      polyfill: false
    });
  } 
  /** * Initial value output */
  for (var i = selector.length - 1; i >= 0; i--) {
    valueOutput(selector[i], i);
  }; 
  /** * Update value output */
  $document.on('input', selector, function(e) {
    valueOutput(e.target.id,e.target.getAttribute('ids'));
  });
  /** * Initialize the elements */
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css"/>

<form action="study.php" method="post" id="judgementevaluation">
    <ul>
        <h3 class="text-center mb-4"><strong>Morgonens Nyheter</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider1" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="0"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output1"></output>
        <input type="hidden" id="j1" name="j1" value="">

        <h3 class="text-center mb-4"><strong>Andreas Berglund</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider2" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="1"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output2"></output>
        <input type="hidden" id="j2" name="j2" value="">

        <h3 class="text-center mb-4"><strong>Sweden Television (SWET)</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider3" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="2"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output3"></output>
        <input type="hidden" id="j3" name="j3" value="">

        <h3 class="text-center mb-4"><strong>Ewa Dubszanska</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider4" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="3"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output4"></output>
        <input type="hidden" id="j4" name="j4" value="">
    </ul>
    <button type="submit" name="evaluate" class="btn btn-primary mt-3">Submit</button>
</form>

将JS范围滑块功能应用于多个ID选择器

1 个答案: