jQuery：根据滑块的值添加class/bootstra-slider.js

Question

我正在使用 bootstrap-slider.js，如果有人可以帮我添加一个函数来添加 class (.active)，我将不胜感激滑块具有特定值（例如 1100），其中 jQuery

class active 应添加到图像或 div （我在演示中使用字体超棒的图标作为示例）

我现在的js

$("#slider").slider({
    tooltip: 'always'
});

$("#slider").on("slide", function(slideEvt) {
    $("#slider-val").val(slideEvt.value);   /* Changes the value of the input field with the slider value */

});

代码笔：http://codepen.io/anon/pen/ojdEBM

Answer 1

向滑动句柄添加if语句以检查滑块值是否等于指定值，然后使用addClass()将活动class添加到元素。

我假设您希望在滑块不在指定值时删除活动的 class，这正是 else 块的作用。如果您不想删除它，请删除 else 块。

$("#slider").on("slide", function(slideEvt) {
    $("#slider-val").val(slideEvt.value);
    if (slideEvt.value == 1531){
      $('.fa-user').addClass('active');
    } else {
      $('.fa-user').removeClass('active');
    }
});

jQuery：根据滑块的值添加class/bootstra-slider.js

jQuery: Add class based on value of a slider / bootstra-slider.js

jquery

twitter-bootstrap

bootstrap-slider