多个框的 jQuery 滑块

Question

我有一个 Asp.Net MVC 创建方法，用户必须在该方法中填写他们与计划相关联的时间。我有以下填充一个框的 jquery 滑块。我现在需要滑块在一周中的所有时间和分钟内执行相同的操作。

目前我有

 $("#slider-range-max").click(function () {
        $("#MondayMinutes").slider({
            range: "max",
            min: 0,
            max: 59,
            value: 15,
            slide: function (event, ui) {
                $("#MondayMinutes").val(ui.value);
            }
        });
        $("#MondayMinutes").val($("#slider-range-max").slider("value"));
    });

    $("#MondayHours").click(function () {
        $("#slider-range-max").slider({
            range: "max",
            min: 1,
            max: 12,
            value: 2,
            slide: function (event, ui) {
                $("#MondayHours").val(ui.value);
            }
        });
        $("#MondayHours").val($("#slider-range-max").slider("value"));
    });

但是我是否必须在一周中的每一天都这样做，还是有更有效的方法来做到这一点？

非常感谢。

Answer 1

以下是如何将同一个滑块用于多个输入：

$(function () {
  // Init slider
  $("#slider-range-max").slider({
    range: "max"
  });

  // Show it on an input click
  $('.my-slider-input').on('click', function(){
    var $this_input=$(this);
    var $slider_node=$('#slider-range-max');

    // Set input-specific slider options
    $slider_node.slider('option', {
      min: $this_input.data('min'),
      max: $this_input.data('max'),
      value: $this_input.val(),
      slide: function (event, ui) {
        $this_input.val(ui.value);
      }
    });

    // Show the slider in place
    $slider_node.insertAfter($this_input).show();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">


<div>
<label for="mon-h">Mon hours:</label>
<input type="text" id="mon-h" class="my-slider-input" data-min="1" data-max="12" value="2" />
</div>
<div>
<label for="mon-m">Mon minutes:</label>
<input type="text" id="mon-m" class="my-slider-input" data-min="0" data-max="59" value="15" />
</div>
<div>
<label for="tue-h">Tue hours:</label>
<input type="text" id="tue-h" class="my-slider-input" data-min="1" data-max="12" value="2" />
</div>
<div>
<label for="tue-m">Tue minutes:</label>
<input type="text" id="tue-m" class="my-slider-input" data-min="0" data-max="59" value="15" />
</div>

<div id="slider-range-max" style="display: none;"></div>

请注意，滑块选项存储在input 元素的属性中（data-min、data-max、value）