带多个句柄的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++ qt
2023-04-20 18:25

回答 4 已采纳以下答案由GPT-3.5大模型与博主波罗歌共同编写：通过进程名获取窗口句柄，可以借助windows API中的相关函数，以下是示例代码： import win32gui import win32pro
c#已知窗体句柄，如何遍历出所有控件句柄 c#
2017-11-30 14:09

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

回答 2 已采纳你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答本次提问扣除的有问必答次数，已经为您补发到账户，我们后续会持续优化，扩大我们的服务范围，为您带来更好地服务。
jquery slider_使用jQuery UI Slider创建音量控制器
2020-06-14 23:18

cune1359的博客如果您是免费赠品猎人，那么您可能已经下载了许多PSD 用户界面（UI）。... 我们将编写以下PSD UI Slider的代码，以用作jQuery UI Slider主题。但是，请注意，本教程是针对中级经验的。话虽如此，只要您对CSS...
quasar开发或者elementUI开发，vue-router路由跳转怎么传递文件句柄对象 elementui vue.js 前端
2022-04-18 17:46

回答 1 已采纳用 eventBus传递
jquery 滑块_4+ jQuery移动价格滑块（范围选择）
2012-06-05 00:00

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

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

悬赏问题

¥50 求解vmware的网络模式问题
¥24 EFS加密后，在同一台电脑解密出错，证书界面找不到对应指纹的证书，未备份证书，求在原电脑解密的方法，可行即采纳
¥15 springboot 3.0 实现Security 6.x版本集成
¥15 PHP-8.1 镜像无法用dockerfile里的CMD命令启动只能进入容器启动，如何解决？(操作系统-ubuntu)
¥30 请帮我解决一下下面六个代码
¥15 关于资源监视工具的e-care有知道的嘛
¥35 MIMO天线稀疏阵列排布问题
¥60 用visual studio编写程序，利用间接平差求解水准网
¥15 Llama如何调用shell或者Python
¥20 谁能帮我挨个解读这个php语言编的代码什么意思？

码龄粉丝数原力等级 --

带多个句柄的Jquery UI滑块

1条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

带多个句柄的Jquery UI滑块

1条回答 默认 最新

悬赏问题

1条回答默认最新