销毁并重新初始化引导滑块

2024-03-20

我正在使用这里找到的 Bootstrap-slider -https://github.com/seiyria/bootstrap-slider https://github.com/seiyria/bootstrap-slider目前正在使用 v10(虽然我也尝试过 v11,但结果相同)。这是我的代码:

/* For better styling - this uses Bootstrap slider */
$('.bs_sliders').each(function () {
    var id = '#' + $(this).attr('id');

    if (typeof window[id] !== 'undefined') {
        window[id].slider('destroy');
        delete window[id];
    }

    // .on will only work with an ID based selector not class
    window[id] = $(id).slider({
        formatter: function (value) {
            return value;
        },
    }).on('change', function (ev) {
        $(this).closest('li').find('.rangeUpdate').val($(this).val());

        $(this).closest('li').find('.continuing_eval').removeClass('continuing_eval');

        autoSave();
    })
})

基本上我试图销毁并重新初始化滑块(如果存在)。虽然它是半工作的,但我注意到(例如)当我的范围是 0-100 时,即使输入如下,它也只能达到 10:

<input type="text" name="54_slider" value="22" class="bs_sliders elRes" id="54_slider" data-slider-id="54_slider"
    data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="22"
    data-slider-handle="custom"
    data-slider-rangeHighlights='[{"start":25,"end":26,"class":"grey_line"},{"start":50,"end":51,"class":"grey_line"},{"start":75,"end":76,"class":"grey_line"}]' />
<input type="text" value="22" class="rangeUpdate" data-toggle="popover" data-trigger="manual"
    data-content="The permitted value range is 0-100" style="--my-content:'Undefined';" />

此外,它也不会选择自定义元素(例如分隔线)。我怎样才能做到这一点,以便当 bs-slider 重新初始化时它会获取所有自定义元素和属性?


事实证明,解决方案是自己销毁它......我们所做的是克隆原始元素 - 获取其值,删除元素,重新附加克隆,然后在滑块上设置值。相当冗长,你可能会期望“摧毁”能够做到这一点,但显然事实并非如此。

$('.bs_sliders').each(function(){
    var id = $(this).attr('id');

    // Detach and Reattach slider cloning the existing element
    if (typeof my_sliders[id] !== 'undefined'){
        delete my_sliders[id];

        var setVal = $(this).attr('value');

        // Parent of current element for new element
        var our_parent = $(this).parents('.slide_slidecontainers');

        // Rebuild the element
        var new_elem = $(this).clone();

        // Get rid of the actual input and rebuild it
        $(this).remove();

        $(our_parent).find('.slider').remove();

        $(our_parent).append($(new_elem));

        use_elem = $(new_elem);
    // Simply Attach using the existing element
    } else {
        use_elem = $(this);
    }

    my_sliders[id] = $(use_elem).slider();

    if (typeof setVal !== 'undefined'){
        my_sliders[id].slider('setValue',setVal);
    }

    my_sliders[id].on('change',function(ev){
        $(this).closest('li').find('.rangeUpdate').val($(this).val());

        $(this).closest('li').find('.continuing_eval').removeClass('continuing_eval');

        autoSave();
    })
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

销毁并重新初始化引导滑块 的相关文章

  • Sequelize.js 中的自定义或覆盖连接

    我需要使用创建自定义连接条件Sequelize js http sequelizejs com使用 MSSQL 具体来说 我需要加入TableB基于一个COALESCE中的列的值TableA and TableB并最终得到这样的连接条件 L
  • JavaScript 中的“new”关键字是什么?

    The newJavaScript 中的关键字第一次遇到时可能会很混乱 因为人们倾向于认为 JavaScript 不是面向对象的编程语言 它是什么 它解决什么问题 什么时候合适 什么时候不合适 它做了 5 件事 它创建一个新对象 这个对象的
  • 使用 jQuery / .data() 避免内存泄漏

    我正在使用 jQuery 动态创建 HTML 元素 现在需要针对它们存储 JavaScript 数据 但是 我现在担心内存泄漏 因为我实际上从未在对象上调用 删除 我 append 和 detach 它们 但从不 remove jQuery
  • 在 Javascript 中本地化字符串

    我目前正在使用 resx文件来管理我的 NET 服务器端资源 我正在处理的应用程序还允许开发人员将 JavaScript 插入各种事件处理程序中以进行客户端验证等 对我来说本地化 JavaScript 消息和字符串的最佳方法是什么 理想情况
  • 为什么“事件”在 Chrome 中全局可用,而在 Firefox 中则不然?

    在回答另一个问题时 出现了一个与event对象在匿名函数中可用 无需传入 在 Chrome 中 下面的代码工作正常 但 Firefox 会抛出错误 document ready function uspsSideboxTrackingClo
  • Google Charts(AreaChart)如何检测缩放变化

    我正在画一个面积图 在覆盖层上有一些标记 我正在使用explorer选项 仅限水平 以便用户放大和缩小 问题是我找不到一种方法来通知缩放更改 以便有机会更新制造商位置 有一个图表范围变化事件 但它不是由 AreaChart 触发的 我尝试检
  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定
  • jQuery 检查复选框并触发 javascript onclick 事件

    我正在尝试使用 jQuery 检查复选框并在此过程中触发 onclick 事件 假设我在 html 中定义了一个复选框
  • 更新 Google 地图流量层而无需重新加载页面

    我的页面中嵌入了 Google 地图 我使用 initMap js 函数来初始化地图 function initMap var map new google maps Map document getElementById t map zo
  • 在 php、ajax 或 javascript 中加载进度?

    任何人都知道如何在系统仍在服务器端获取数据的同时在客户端显示加载进度以及完成的百分比 例如 当我在客户端按下 确定 按钮时 它会调用服务器端从数据库收集数据 整个过程可能需要2到3分钟 如何在客户端显示加载进度 大约加载完成了多少 我怎样才
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 删除 Laravel Mix 中的临时文件

    我想在 laravel mix 构建期间或之后删除临时构建文件 这是我目前拥有的一些代码 但是del不工作 const mix require laravel mix const del require del compile sass i
  • Phonegap facebook 插件:android 的各种问题

    我正在尝试将 Phonegap 3 1 与 Phonegap facebook plugin 集成 以使我的应用程序能够使用 facebook 登录 https github com phonegap phonegap facebook p
  • PhantomJS 网页内存消耗?

    是否有一种编程方式 因为我想在运行时自动执行 方式来查看网页在通过 PhantomJs 运行时使用了多少内存 我也在使用 casperjs 如果这有帮助的话 我已经搜索了很多但没有找到任何方法 PhantomJs 使用 QtWebKit 因
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • JavaScript 中最长的通用前缀

    我正在尝试解决 Leet Code 挑战14 最长公共前缀 https leetcode com problems longest common prefix 编写一个函数来查找字符串数组中最长的公共前缀字符串 如果没有公共前缀 则返回空字
  • openssl_pkey_get_details($res) 不返回公共指数

    我在用着这个例子 https stackoverflow com a 12575951 2016196使用 php 生成的密钥进行 javascript 加密openssl图书馆 但是 details openssl pkey get de

随机推荐

  • r facet_wrap 未与 geom_point 正确分组

    我正在与 R 中的facet wrap 作斗争 它应该很简单 但是facet 变量没有被拾取 这是我正在运行的 plot ggplot data item household descr count mapping aes x item h
  • 如何在 XSL 中“重用”代码

    我正在使用 XSLT 节点 我的问题是关于 XSL 的 我在互联网上进行了搜索 但我只找到了有关 XML 处理的信息以将其显示在网页上 我正在搜索的信息是如何在这种情况下 重用 某些代码 我的 XSL 是
  • jQuery colorbox onclose 更新父级

    可以为你们提供一些帮助 所以我使用 jQuery colorbox 并通过单击链接激活它 在颜色框中有一个带有一些复选框的表单 我想做的是在单击提交时将所选复选框的所有值获取到父级 并随后关闭颜色框 我不想刷新父窗口 它应该自动用内容填充
  • 警告:mysqli_connect():(HY000/1045):用户“用户名”@“localhost”的访问被拒绝(使用密码:YES)

    警告 mysqli connect HY000 1045 第 6 行 C Users xampp htdocs PHP Login Script config php 中的用户 用户名 localhost 使用密码 YES 访问被拒绝 即使
  • 名称 虚伪列表

    有人知道虚伪姓名的公开列表吗 名字的缩写形式 例如安东尼的托尼 罗斯玛丽的罗西或维多利亚的维姬 有一个 perl 模块可以在这里做到这一点 http metacpan org pod Lingua EN 昵称 http metacpan o
  • SVG 圆起点

    如何更改 svg 圆的起始点 使其从 0 点钟开始逐渐动画化 默认圆形 svg 从 3 点钟开始 我当前的圈子 悬停动画 timeline position fixed width 500px height 500px top 50 lef
  • Java Pair 类实现[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有经过验证的 Java Pair 类实现 我的意思是随时可用 被广泛接受和测试 可能是 Apache
  • jQuery Highcharts:使用下拉列表更改图表类型

    我正在尝试更改图表的值 如下所示
  • Git 推送不起作用错误“您必须使用个人访问令牌或 SSH 密钥”

    Git 抛出错误 C Program Files x86 Git bin git exe push u recurse submodules check progress origin refs heads dev civaplugin r
  • Android Holo 主题不包含多行微调器下拉项[重复]

    这个问题在这里已经有答案了 我最近刚刚在我的 Android 应用程序中实现了全息主题 执行此操作后 我拥有的任何下拉项长为多行的微调器都不会将文本换行为多行 每个下拉项目都保留在一行上并被截断为一定的长度 这是我的微调器下拉资源的 xml
  • 如何在 pyspark - dataframe 中将月份名称更改为不同的语言

    我正在尝试使用以下配置在 Databricks 上创建 日期 表 Get date range dateFrom dbutils widgets get date from dateTo dbutils widgets get date t
  • 在客户端计算机上安装 BCP 而不安装 SQL Server?

    我使用从数据库导出数据BCP实用程序 我想在客户端计算机上安装 bcp 我不想在客户端计算机上安装 SQL Server 2008 他们是否有可用于仅安装 bcp 的最小安装程序 这是一项紧急任务 提前致谢 您必须使用其中之一SQL Ser
  • 样式表中的单位“em”取决于什么。 CSS

    em根据屏幕尺寸调整尺寸 是的 但很困惑 em 取决于浏览器设置吗 哪些设置 或者 em 取决于屏幕分辨率 或者帮助它依赖什么以及从哪里可以更改这些元素以观察使用 em 时大小的差异 1em 等于当前字体大小 2em 表示当前字体大小的 2
  • 停止 JavaScript 中挂起的异步函数

    这里我有两个同时运行的 JS 异步函数 当一个结束 回调已运行 时 我想阻止另一个继续 但是 这是我的问题 我无法使用全局变量 然后 我想知道是否可以停止 JS 中的待处理函数或任何方法来解决我的问题 我将不胜感激任何答案 EDIT 一些澄
  • 修改后的 ClaimsPrincipal 无效

    我正在使用 ASP NET MVC Identity2 我添加了 名字 自定义ClaimPrincipal public async Task
  • 任意泛型的 Typescript 映射

    我试图定义两种类型 它们应该类似于 export type IQuery
  • 如何在 SVG 中嵌入 schema.org 标记?

    我希望向 SVG 文件添加语义 并希望使用 schema org 术语 SVG 有执行此操作的语法吗 我的第一次尝试是
  • LaTeX 中的脚注间距

    我正在写论文 研究生院说我需要在多个脚注之间留一个空格 而且文本和脚注开头之间的空格太小 有没有办法做到这一点 任何帮助是极大的赞赏 footnotesep是脚注之间的空格 setlength footnotesep 0 5cm footi
  • 将一堆扩展名为“.jpg”的 PNG 图像重命名为“.png”

    所以我有一个包含数千个图像文件的文件夹 所有这些文件都保存为 jpg 问题是其中一些文件实际上是 PNG 图像文件 因此它们无法在很多程序中打开 除非我手动将其扩展名更改为 png 例如 Ubuntu 图像查看器会抛出此错误 解释 JPEG
  • 销毁并重新初始化引导滑块

    我正在使用这里找到的 Bootstrap slider https github com seiyria bootstrap slider https github com seiyria bootstrap slider目前正在使用 v1