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

以下是如何为多个输入使用相同的滑块：

＆＃13;

var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
      $scope.display = false;
      $scope.isButtonVisible = function(pageUrl){     
    if(pageUrl){
      $scope.display = true;
      }
     else{$scope.display = false;}
};
        
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestController">
  
   <input ng-model="pageUrl" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
 <div class="ButtonCont" ng-show="display">
        <button ng-click="send()">Fetch data</button>
    </div>
  
  <input ng-model="pageUrl2" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
 <div class="ButtonCont" ng-show="pageUrl2">
        <button ng-click="send()">Fetch data</button>
    </div>
</div>

＆＃13;

请注意，滑块选项存储在$(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）

多个框的jQuery滑块

1 个答案: