带多个句柄的Jquery UI滑块

I have used slider event from jQuery UI for slider to create a custom grid with additional handlers in the slider.

When I select columns(grid) in the dropdown, it doesn't change slider event option values and handles.

WHAT I WANT

When I drag the slider to the desired columns/grid then the values should be displayed in the input field. The values in the below code are the percentage of the column which i am going to set for a custom grid.

jQuery(document).ready(function($) {

  jQuery('#footer_widgets_layout').change(function() {
    $(".slider").hide();
    var columns = jQuery(this).val();
    widget_slider(columns);
    $(".slider_" + columns).show();
  }).change();

  function widget_slider(columns) {
    slider_values = [10, 30, 50, 70];
    if (columns == '5') {
      slider_values = [10, 30, 50, 70, 90];
    }
    if (columns == '4') {
      slider_values = [10, 50, 70, 90];
    }
    if (columns == '3') {
      slider_values = [10, 50, 70];
    }
    if (columns == '2') {
      slider_values = [10, 50];
    }
    if (columns == '1') {
      slider_values = [10];
    }

    jQuery("#slider").slider({
      min: 0,
      max: 100,
      step: 1,
      values: slider_values,
      slide: function(event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
          $(".slider_" + columns + " .sliderValue[data-index=" + i + "]").val(ui.values[i]);
        }
      }
    });

    jQuery('.slider_' + columns + ' .sliderValue').change(function() {
      var $this = $(this);
      $("#slider").slider("values", $this.data("index"), $this.val());
    });
  }
});

.slider_5,
.slider_4,
.slider_3,
.slider_2,
.slider_1 {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="footer_columns">
  <label>Footer Columns</label>
  <select id="footer_widgets_layout">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<br />

<div class="slider_5 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="30" />
  <input type="text" class="sliderValue" data-index="2" value="50" />
  <input type="text" class="sliderValue" data-index="3" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_4 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_3 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
</div>

<div class="slider_2 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
</div>

<div class="slider_1 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
</div>
<br />

<div id="slider"></div>

</div>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

duanqia9034 2016-11-01 13:45

关注

jQuery(document).ready(function($) {

  jQuery('#footer_widgets_layout').change(function() {
    $(".slider").hide();
    var columns = jQuery(this).val();
    widget_slider(columns);
    $(".slider_" + columns).show();
  }).change();

  function widget_slider(columns) {
    slider_values = [10, 30, 50, 70];
    if (columns == '5') {
      slider_values = [10, 30, 50, 70, 90];
    }
    if (columns == '4') {
      slider_values = [10, 50, 70, 90];
    }
    if (columns == '3') {
      slider_values = [10, 50, 70];
    }
    if (columns == '2') {
      slider_values = [10, 50];
    }
    if (columns == '1') {
      slider_values = [10];
    }

    if ( undefined !== jQuery("#slider").slider( 'instance' ) ) {
      jQuery("#slider").slider( 'destroy' );
    }
    var setSlider = function ( values ) {
        jQuery("#slider").slider({
            values: values,
            min: 0,
            max: 100,
            step: 1,
            slide: function(event, ui) {
                for (var i = 0; i < ui.values.length; ++i) {
                  $(".slider_" + columns + " .sliderValue[data-index=" + i + "]").val(ui.values[i]);
                }
            }
        });
    };
    var val = slider_values;
    setSlider( val );

    jQuery('.slider_' + columns + ' .sliderValue').change(function() {
      var $this = $(this);
      $("#slider").slider("values", $this.data("index"), $this.val());
    });
  }
});

.slider_5,
.slider_4,
.slider_3,
.slider_2,
.slider_1 {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="footer_columns">
  <label>Footer Columns</label>
  <select id="footer_widgets_layout">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<br />

<div class="slider_5 slider">
  <input type="text" class="sliderValue" data-index="0" value="20" />
  <input type="text" class="sliderValue" data-index="1" value="40" />
  <input type="text" class="sliderValue" data-index="2" value="60" />
  <input type="text" class="sliderValue" data-index="3" value="80" />
  <input type="text" class="sliderValue" data-index="3" value="100" />
</div>

<div class="slider_4 slider">
  <input type="text" class="sliderValue" data-index="0" value="25" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="75" />
  <input type="text" class="sliderValue" data-index="3" value="100" />
</div>

<div class="slider_3 slider">
  <input type="text" class="sliderValue" data-index="0" value="33" />
  <input type="text" class="sliderValue" data-index="1" value="66" />
  <input type="text" class="sliderValue" data-index="2" value="99" />
</div>

<div class="slider_2 slider">
  <input type="text" class="sliderValue" data-index="0" value="50" />
  <input type="text" class="sliderValue" data-index="1" value="80" />
</div>

<div class="slider_1 slider">
  <input type="text" class="sliderValue" data-index="0" value="70" />
</div>
<br />

<div id="slider"></div>

jQuery(document).ready(function($) {

  jQuery('#footer_widgets_layout').change(function() {
    $(".slider").hide();
    var columns = jQuery(this).val();
    widget_slider(columns);
    $(".slider_" + columns).show();
  }).change();

  function widget_slider(columns) {
    slider_values = [10, 30, 50, 70];
    if (columns == '5') {
      slider_values = [10, 30, 50, 70, 90];
    }
    if (columns == '4') {
      slider_values = [10, 50, 70, 90];
    }
    if (columns == '3') {
      slider_values = [10, 50, 70];
    }
    if (columns == '2') {
      slider_values = [10, 50];
    }
    if (columns == '1') {
      slider_values = [10];
    }

    jQuery("#slider").slider({
      min: 0,
      max: 100,
      step: 1,
      values: slider_values,
      slide: function(event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
          $(".slider_" + columns + " .sliderValue[data-index=" + i + "]").val(ui.values[i]);
        }
      }
    });

    jQuery('.slider_' + columns + ' .sliderValue').change(function() {
      var $this = $(this);
      $("#slider").slider("values", $this.data("index"), $this.val());
    });
  }
});

.slider_5,
.slider_4,
.slider_3,
.slider_2,
.slider_1 {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="footer_columns">
  <label>Footer Columns</label>
  <select id="footer_widgets_layout">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<br />

<div class="slider_5 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="30" />
  <input type="text" class="sliderValue" data-index="2" value="50" />
  <input type="text" class="sliderValue" data-index="3" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_4 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_3 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
</div>

<div class="slider_2 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
</div>

<div class="slider_1 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
</div>
<br />

<div id="slider"></div>

</div>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

报告相同问题？

关注问题

带多个句柄的Jquery UI滑块 css html jquery php
2016-11-01 11:43

回答 1 已采纳 jQuery(document).ready(function($) { jQuery('#footer_widgets_layout').change(function() {
在ListenAndServe内部调用多个句柄
2018-12-21 17:38

回答 1 已采纳 ListenAndServe only takes a single http.Handler. The simplest way to do this without bringing in
MFC 多次调用StretchDIBits 句柄无效 c++ mfc
2018-09-13 01:43

回答 4 已采纳是不是GDI资源泄露了？？
Slider-Plugin:对 jQuery UI 滑块插件的修改。（我把“乐趣”放在滑块功能中。）
2021-06-20 00:50

通用滑块插件Jeff Stein 的 jQuery 插件该插件为 jQuery UI 滑块组件添加了功能。它使用 jQuery、jQuery UI 和 Less CSS。关于作者：杰弗里·D·斯坦创建日期：2011 年 5 月 24 日GitHub 页面：依赖项：必需的...
请问C语言如何实现多个窗口的嵌套？ c语言 windows
2023-03-17 23:06

回答 5 已采纳参考GPT和自己的思路：实现窗口嵌套需要在窗口过程函数中处理WM_CREATE消息，以创建子窗口，并在父窗口的WM_SIZE消息中调整子窗口的大小和位置。以下是一个简单的示例代码，可以创建两个嵌套的窗
C#获取句另一个应用程序句柄实现登录功能 asp.net c# microsoft visual studio
2020-07-09 11:16

回答 1 已采纳一步一步调试，首先看hwnd有没有找到，htextbox有没有找到 htextbox应该是combobox的子窗口，先找combobox htextbox2应该和那个combobox是同一个级的，
如何让多个beep函数同时发出声音 c++ c语言 windows
2021-09-17 11:48

回答 2 已采纳 PlaySound The PlaySound function plays a sound specified by the given filename, resource, or system
jQuery-Price-Range-Slider-With-User-Input:完整，有效和快速的jQuery价格范围滑块
2021-05-10 20:24

防止jQuery UI滑块句柄重叠。每一步都定义了滑块范围，以指向良好的值，例如100或200或500或1000。可能基于用户输入的jQuery UI滑块句柄。简单的代码。在大约80行的jQuery（包括初始属性和属性面板）上，如果要...
c#已知窗体句柄，如何遍历出所有控件句柄 c#
2017-11-30 14:09

回答 3 已采纳答案出来了：https://zhidao.baidu.com/question/1575352645104568900.html 说到做到，发代码，链接为源地址，下面我备注一下而已 ```
如何获得弹出菜单的句柄 python windows 有问必答
2022-03-10 17:48

回答 2 已采纳你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答本次提问扣除的有问必答次数，已经为您补发到账户，我们后续会持续优化，扩大我们的服务范围，为您带来更好地服务。
quasar开发或者elementUI开发，vue-router路由跳转怎么传递文件句柄对象 elementui vue.js 前端
2022-04-18 17:46

回答 1 已采纳用 eventBus传递
jquery slider_使用jQuery UI Slider创建音量控制器
2020-06-14 23:18

cune1359的博客如果您是免费赠品猎人，那么您可能已经下载了许多PSD 用户界面（UI）。... 我们将编写以下PSD UI Slider的代码，以用作jQuery UI Slider主题。但是，请注意，本教程是针对中级经验的。话虽如此，只要您对CSS...
selenium跳转到新页面中的句柄问题 python selenium
2021-10-21 10:53

回答 1 已采纳句柄就是一个窗口的ID。倒数第三行就是切换driver窗口，句柄高低不太清楚，一般是后打开的窗口句柄处于最后一个（最高）划掉的代码你移到上面会有提示，估计是说这个方法即将被弃用，建议你使用另一个切换窗
jquery 滑块_4+ jQuery移动价格滑块（范围选择）
2012-06-05 00:00

dingshi7798的博客 jquery 滑块今天的帖子是jQuery Mobile Price Sliders的列表。这些插件可用于数字，价格或需要选择范围的任何东西。移动幻灯片为移动用户提供了一种简便的方法，只需用手指滑动任何触摸设备即可选择值，并且当前...
前端面试题
2022-06-07 21:34

Amao?的博客前端面试
没有解决我的问题, 去提问

悬赏问题

¥15 delta降尺度计算的一些细节，有偿
¥15 Arduino红外遥控代码有问题
¥15 数值计算离散正交多项式
¥30 数值计算均差系数编程
¥15 redis-full-check比较两个集群的数据出错
¥15 Matlab编程问题
¥15 训练的多模态特征融合模型准确度很低怎么办
¥15 kylin启动报错log4j类冲突
¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大
¥15 import arcpy出现importing _arcgisscripting 找不到相关程序

码龄粉丝数原力等级 --

带多个句柄的Jquery UI滑块

1条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

带多个句柄的Jquery UI滑块

1条回答 默认 最新

悬赏问题

1条回答默认最新