滑块问题(使用JQuery和Coffeescript)

时间:2017-12-07 20:55:29

标签: jquery-ui coffeescript

我正在学习jquery-ui并且一直在玩滑块,目的是将它集成到我的应用程序中。

警告 - 以下代码在Coffeescript中。

我有这个滑块(从网站示例中复制)并调整了一些选项。它似乎工作正常。

$('#slider-range').slider
    range: true
    ..........
    slide: (event, ui) ->
      $('#amount').val '$' + ui.values[0] + ' - $' + ui.values[1]
      return
  $('#amount').val '$' + $('#slider-range').slider('values', 0) + ' - $' + $('#slider-range').slider('values', 1)
  return

我可以在任何页面中使用滑块范围,它可以正常工作。

我删除了一些代码,因为它有效。但是我试图再实现两个滑块,但它们似乎没有加载。

$('#treble').slider
return

$('#bass').slider
return

我遇到了数据贴纸的问题(我在另一个应用程序中使用)并且也不会加载。

我将CDN用于我的文件,即JQuery 3.2.1和JQuery-UI 1.12.1

我觉得令人费解的是一个滑块有效,另外两个没有。有什么建议?我没有发布我的布局文件以缩短帖子。

我在Inspector / Devtools中没有发现任何问题。

如果出现问题,我会添加我的头部指令。

doctype html
html lang="en"
  head
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/styles.css"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
    <script src="/javascripts/application.js"></script>

0 个答案:

没有答案