引导滑块不起作用

Posted 2023-02-22

【中文标题】引导滑块不起作用

【英文标题】：Bootstrap Slider isn't working

【发布时间】：2013-12-31 08:30:03

【问题描述】：

我正在尝试让这个基本的 Bootstrap 滑块工作，但这只是让我望而却步。

http://getbootstrap.com/ 引导

http://www.eyecon.ro/bootstrap-slider/ 引导滑块

我正在尝试实现这一点，但无法弄清楚为什么它不起作用。我已经确认jQuery 1.8.3 在服务器上运行。我已经包含了Bootstrap 3.0.3 的 CSS/JS。我已经包含了 Bootstrap Slider 的 CSS/JS。

这是我用来运行它的代码：

<div class="row">
  <div class="col-md-6">

    <input type="text" id="foo" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after"data-slider-tooltip="hide">
    <input type="text" id="bar">

    <script type="text/javascript">
      $('#foo').slider().on('slide', function(ev)  $('#bar').val(ev.value); );
    </script>

  </div>
</div>

我得到的只是两个文本输入框，而不是滑块。有什么想法吗？

【问题讨论】：

是否有任何开发工具引发错误？

是的，出于某种原因。查看 bootstrap.js 它给出了 Bootstrap requires jQuery 错误。我不明白为什么，因为我通过控制台做了版本测试，它给了我 1.8.3。

你在引导之前包含了 jquery 对吧？这里看起来不错jsfiddle.net/dLajg

刚刚发现没有安装最新版本的jQuery。谢谢大家的帮助！

【参考方案1】：

这通常是移动点击而不是桌面视图的问题，但如果您也遇到桌面视图问题，下面的解决方案也应该适用于桌面。

假设您的 html 如下所示：

<div class="slider-info">
  <input type="text" id="slider" 
    data-slider-min="10" 
    data-slider-max="1000" 
    data-slider-step="1">
</div>

那么你的脚本将如下所示

$(".slider-info").on("tap", function(e)
  let sliderID = "#slider";
  let slider = $(sliderID).data('slider');
  let length = chartData.length;
  let left = slider.getValue()[0];
  let right = slider.getValue()[1];

  let offset = e.pageX - $(this).offset().left;
  let width = $(this).width();
  let clickValue = parseInt(length * 1.0 * offset /  width);

  if (Math.abs(left-clickValue) < Math.abs(right-clickValue)) 
    slider.setValue([clickValue, end]);
   else 
    slider.setValue([start, clickValue]);
  
);

上述解决方案仅适用于移动浏览器。如果您也遇到桌面视图问题，请不要使用

$(".slider-info").on("tap", function(e)

使用

$(".slider-info").click(function(e)

【参考方案2】：

为您的网站使用 Bootstrap4。首先，从其官方网站https://getbootstrap.com/ 安装 bootstrap4，或者您也可以在 Index.html 文件中添加 CSS 链接和 JS 脚本。此外，在引导 js 脚本上方添加 jquery 文件。 在该副本之后，此代码用于创建专业轮播：

https://getbootstrap.com/docs/4.0/components/carousel/

【参考方案3】：

我建议您安装最新版本的 jQuery 来解决您的问题。我有一个类似的问题，一旦我安装了最新版本的 jQuery，它就得到了解决。祝你好运。