Question

我正在尝试使用rangeslider.js插件创建图形编辑器，但不知何故它不能正确更新条形图（大多数情况下它根本不起作用）。我有一个有效的演示here，但也为它创建了一个简化的Fiddle。有时候，当我在我的脚本中执行两次单击时，它会有所帮助（不是小提琴，也不知道为什么）。任何帮助非常感谢！

$(function() {
var $document   = $(document),
    $inputRange = $('input[type="range"]');

function valueOutput(element) {
    var value = element.value,
    output = element.parentNode.getElementsByTagName('output')[0];
    output.innerHTML = value;
}
for (var i = $inputRange.length - 1; i >= 0; i--) {
    valueOutput($inputRange[i]);
};
$document.on('input', 'input[type="range"]', function(e) {
    valueOutput(e.target);
});

$document.on('input', '#graph-kw input', function(e) {
    $stock_kw = $('#jform_stock_kw').val();
    $remap_kw = $('#jform_remap_kw').val();
    $stock_vals = $('#graph-kw output.stock-kw');
    $remap_vals = $('#graph-kw output.remapped-kw');

    $('#jform_graph_stock_kw').val($stock_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$stock_kw).toFixed(3);
    }).get().join(','));
    $('#jform_graph_remap_kw').val($remap_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$remap_kw).toFixed(3);
    }).get().join(','));
});

$document.on('input', '#graph-nm input', function(e) {
    $stock_nm = $('#jform_stock_nm').val();
    $remap_nm = $('#jform_remap_nm').val();
    $stock_vals = $('#graph-nm output.stock-nm');
    $remap_vals = $('#graph-nm output.remapped-nm');

    $('#jform_graph_stock_nm').val($stock_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$stock_nm).toFixed(3);
    }).get().join(','));
    $('#jform_graph_remap_nm').val($remap_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$remap_nm).toFixed(3);
    }).get().join(','));
});

$inputRange.rangeslider({
  polyfill: false
});


$('#jform_engine_type,#jform_engine_supercharged').on('change', function() {
    var $fuel = $('#jform_engine_type > input[type="radio"]:checked').val();
    var $turbo = $('#jform_engine_supercharged > input[type="radio"]:checked').val();
    if($turbo !== undefined && $fuel !== undefined) {
        if($turbo == "yes" && $fuel == "Diesel") $('#jform_visual_graph0').prop('checked',true);
        if($turbo == "no" && $fuel == "Diesel") $('#jform_visual_graph1').prop('checked',true);
        if($turbo == "yes" && $fuel == "Gasoline") $('#jform_visual_graph2').prop('checked',true);
        if($turbo == "no" && $fuel == "Gasoline") $('#jform_visual_graph3').prop('checked',true);
        $('#jform_visual_graph').change();
    }
});
$('#jform_visual_graph').on('change', function() {
    var $button = $(this).find(':checked');
    var $label = $('label[for='+$button.attr('id')+']').html();
    $('#jform_visual_load').attr('data-id',$button.val()).html('<span class="icon icon-refresh"></span> '+$label);
});
$('#jform_visual_graph').append('<button href="#" id="jform_visual_load"><span class="icon icon-refresh"></span></button>');

$('#jform_visual_load').on('click', function(e) {
    e.preventDefault();
    var $el = $(this);
    $el.prop('disabled',true);
    $stock_kw = $('#jform_stock_kw').val();
    $remap_kw = $('#jform_remap_kw').val();
    $stock_nm = $('#jform_stock_nm').val();
    $remap_nm = $('#jform_remap_nm').val();

    $.ajax({
        'global': false,
        'url': $el.data('id')+'_kw.json',
        'dataType': "json",
        'success': function (data) {
            json = data;
            for(i=0, len=json[0].length; i < len; i++) {
                stock_val = Math.round($stock_kw * json[0][i]);
                remap_val = Math.round($remap_kw * json[1][i]);
                $('#stock_kw_'+i+' > input').attr({value: stock_val, max: $remap_kw}).prop('disabled',false).siblings('output').val(stock_val);
                $('#remap_kw_'+i+' > input').attr({value: remap_val, max: $remap_kw}).prop('disabled',false).siblings('output').val(remap_val);
            }
            $('#graph-kw input').rangeslider('update', true);
        }
    });

    $.ajax({
        'global': false,
        'url': $el.data('id')+'_nm.json',
        'dataType': "json",
        'success': function (data) {
            json = data;
            for(i=0, len=json[0].length; i < len; ++i) {
                stock_val = Math.round($stock_nm * json[1][i]);
                remap_val = Math.round($remap_nm * json[0][i]);
                $('#stock_nm_'+i+' > input').attr({value: stock_val, max: $remap_nm}).prop('disabled',false).siblings('output').val(stock_val);
                $('#remap_nm_'+i+' > input').attr({value: remap_val, max: $remap_nm}).prop('disabled',false).siblings('output').val(remap_val);
            }
            $('#graph-nm input').rangeslider('update', true);
        }
    });
});
});

Answer 1

事实证明，问题出在jQuery本身。

$('#stock_kw_'+i+' > input').attr({value: stock_val})和$('#stock_kw_'+i+' > input').val(stock_val)都没有更新input[type=range]所以我用旧的基本javascript取代了jQuery，现在它完美运行（有或没有rangelider.js）

无法使用以编程方式加载的属性更新rangeslider.js

1 个答案: