ionRangeSlider onChange事件获取input的num属性返回undefined的解决方法

这个问题的核心原因是：在ionRangeSlider的onChange回调函数里，this指向的是滑块的实例对象，而非你最初的<input>元素，所以用$(this).attr("num")自然拿不到目标属性值。

这里有两种可靠的解决方法：

方法一：利用回调参数里的data.input获取原input元素 #

ionRangeSlider的onChange回调会传递一个data对象，其中的input属性直接指向初始化滑块的原始<input> DOM元素，你可以直接用它来获取自定义属性：

$(".range").ionRangeSlider({
    min: 25,
    max: 625,
    step: 1,
    prefix: "%",
    grid: true,
    onChange: function(data) {
        var val_percent = data.from;
        // 将原生DOM元素转为jQuery对象后获取属性
        var id_prof = $(data.input).attr("num");
        alert(id_prof);
    }
});

方法二：初始化前先保存input的引用 #

如果需要在多个回调里复用这个input的引用，也可以用each遍历初始化，提前保存每个input的jQuery引用：

$(".range").each(function() {
    var $input = $(this); // 保存当前input的jQuery实例
    $input.ionRangeSlider({
        min: 25,
        max: 625,
        step: 1,
        prefix: "%",
        grid: true,
        onChange: function(data) {
            var val_percent = data.from;
            var id_prof = $input.attr("num");
            alert(id_prof);
        }
    });
});

额外建议：把自定义属性num改成符合HTML5规范的data-num，这样更标准，获取值时可以用$input.data("num")，代码可读性和兼容性更好。

内容的提问来源于stack exchange，提问作者Mido Bona