Javascript Rails 4-引导滑块-动态填充数据标记上的工具提示？

我正在尝试在Rails 4应用程序中使用引导滑块

我尝试使用的特性在本例中的引导滑块中显示

我试图根据数据滑块值动态填充工具提示文本

我认为：

<input id="ex13" type="text" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>

}))

我有一个叫TRL的模型。该表具有称为level（整数）和description（文本）的属性

数据滑块值现在显示trl.level。这部分工作正常，但我不知道如何让格式化程序功能工作

我可以从文档中看到格式化程序参数不能作为数据属性传递

我尝试将其添加到js方法中

$("#ex13").bootstrapSlider({
        ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
        ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
        ticks_snap_bounds: 30,
        orientation: 'vertical',
        tooltip_position: 'left',
        enabled: false,
        formatter: "<%= @project.trl.description%>"
    });

$（“#ex13”）.bootstrapSlider({
滴答声：[10,20,30,40,50,60,70,80]，
标记标签：[“试验板”、“高保真”、“低保真”、“演示”、“操作环境”、“原型”、“相关环境”、“模拟”]，
刻度捕捉界限：30，
方向：'垂直'，
工具提示_位置：“左”，
启用：false，
格式化程序：“
});

那不行。如何在滑块中使用格式化程序功能

采纳ASHITAKA的建议

我尝试将我的js修改为：

jQuery(document).ready(function() {



    $("#ex13").bootstrapSlider({
        ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
        ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
        ticks_snap_bounds: 30,
        orientation: 'vertical',
        tooltip_position: 'left',
        enabled: false,
        // formatter: "<%= @project.trl.description%>"
        formatter: function(value) {
        return "<%= @project.trl.description%>";
        }
    });

}); 

jQuery（文档）.ready（函数（）{
$（“#ex13”）.bootstrapSlider({
滴答声：[10,20,30,40,50,60,70,80]，
标记标签：[“试验板”、“高保真”、“低保真”、“演示”、“操作环境”、“原型”、“相关环境”、“模拟”]，
刻度捕捉界限：30，
方向：'垂直'，
工具提示_位置：“左”，
启用：false，
//格式化程序：“
格式化程序：函数（值）{
返回“”；
}
});
}); 

---

该尝试打印出属性，而不是获取该属性的内容并打印出来。因此，实现这个概念的下一步是如何将保存在数据库中的数据传递到js工具提示？

您不能将Ruby方法（在本例中为

@project.trl.description

）传递到JavaScript库（在本例中为

引导滑块

）

我不知道方法

@project.trl.description

的作用，但您必须在JavaScript中重新实现该方法，并按如下方式传递：

$('#ex13').slider({
  ... // other options
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

---

尝试将描述值添加到输入元素中的数据属性，以便在html中呈现输入时，该值就在那里。我在输入中添加了数据描述属性

<input id="ex13" type="text" data-description="<%= @project.trl.description%>" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>

如果jquery版本>1.4.3，则应使用

---

$（“#ex13”）.data（“description”）

@project.trl.description包含我希望在工具提示中显示的数据，我希望通过引用设置的数据勾号填充这些数据。你能帮我理解你写的代码吗？当前值是多少？什么是+值？“函数（值）”中的值是什么意思？您尝试过什么？这是基本的JavaScript。你为什么不试试看会发生什么？还考虑学习感谢Ashitaka，我已经尝试了大约50个不同的组合取代我想到的任何东西到你建议的线条。我正在努力学习简单的javascript。您链接的资源中有没有一部分可以帮助我了解如何理解您建议的内容？我已经完成了该课程的前三个模块，但我还没有遇到一些可以帮助我理解您的建议的东西。在you

formatter

函数中，添加

调试器

语句或

console.log（value）

以了解传递到函数中的

值。如中所示，如果您只是
返回值，会发生什么
<input id="ex13" type="text" data-description="<%= @project.trl.description%>" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>

formatter: function(value) {
    var description = $('#ex13').attr("data-description")
    return value+' '+description;
}