引导范围滑块结合了onchange功能，而不是重复onchange功能？

Question

我想最小化代码，我想避免在onchange上重复代码，有人可以帮助我缩短代码吗？

$(document).ready(function(){

var realValues = [10, 20, 30, 40, 50];
var labelValues = ['10', '20', '30', '40', '50' ];

var realValues2 = [0, 8, 16, 24];
var labelValuesTwo = ['0', '8', '16', '24'];



var trueValue1 = 40;
var trueValue2 = 10;

var ex1 = $('#ex1').slider({ 
value : 0, <br>
max: 4,  <br>
min: 0,  <br>
step: 1, <br>
formatter: function(val) { 
return labelValues[val]; 
}
});

$('#ex1').on('change', function(data){
var uno = $("#valOne").val(realValues[data.value.newValue]); 
var valOne =  $("#valOne").val(); 
var valTwo =  $("#valTwo").val(); 
var totalValues =  parseInt(valTwo) * trueValue1; 
var totalValues2 =  parseInt(valOne) * trueValue2; 
var total = valOne + realValues2[data.value.newValue];
var totalAllin = parseInt(totalValues2) +  parseInt(totalValues); 
$("#ex6SliderVal2").text(total); 
$("#SumAll").text(totalAllin + '' +' MB'); 
$("#TotalAll").val(totalAllin); 
$("#trueValue1").text(totalValues + '' + ' MB'); 
$("#trueValue2").text(totalValues2 + '' + ' MB');  
}); 

var ex2 = $('#ex2').slider({ 
value : 0, 
max: 3, 
min: 0, 
step: 1, 
formatter: function(val) { 
return labelValuesTwo[val]; 
} 
}); 

$('#ex2').on('change', function(data){ 
var dos = $("#valTwo").val(realValues2[data.value.newValue]); 
var valOne =  $("#valOne").val(); 
var valTwo =  $("#valTwo").val(); 
var totalValues =  parseInt(valTwo) * trueValue1; 
var totalValues2 =  parseInt(valOne) * trueValue2;
var total = valOne + realValues2[data.value.newValue]; 
var totalAllin = parseInt(totalValues2) + parseInt(totalValues); 
$("#ex6SliderVal2").text(total); 
$("#SumAll").text(totalAllin + '' + ' MB'); 
$("#TotalAll").val(totalAllin); 
$("#trueValue1").text(totalValues + '' + ' MB'); 
$("#trueValue2").text(totalValues2 + '' + ' MB');   
}); 
})

Answer 1

将常见的回调函数抽象为单个函数。 在第一行之后，所有其他行看起来都相同：

function updateTotals(data) {
    var valOne = $("#valOne").val();
    var valTwo = $("#valTwo").val();
    var totalBrowse = parseInt(valTwo) * webBrowse;
    var totalEmail = parseInt(valOne) * emailValue;
    var total = valOne + realValues2[data.value.newValue];
    var totalData = parseInt(totalEmail) + parseInt(totalBrowse);
    $("#ex6SliderVal2").text(total);
    $("#TheSumMB").text(totalData + '' + ' MB');
    $("#TotalAllocation").val(totalData);
    $("#webBrowse").text(totalBrowse + '' + ' MB');
    $("#emailValue").text(totalEmail + '' + ' MB');
}

然后在绑定到change事件时引用该回调函数：

$(ex1).change(function(data) {
    $("#valOne").val(realValues[data.value.newValue]);
    updateTotals(data);
});
$(ex2).change(function(data) {
    $("#valTwo").val(realValues2[data.value.newValue]);
    updateTotals(data);
});

请参阅下面的操作，其中格式化程序功能也已抽象为通用函数（即formatterFunction ）。 可以注意到，将10作为第二个参数传递给parseInt ，因为在解析的数字以0开头的情况下，这是一种好习惯（有关更多信息，请参见parseInt（）描述 ）。

 var webBrowse = 40; var emailValue = 1; var realValues = [10, 20, 30, 40, 50]; var labelValues = ['10 MB', '20 MB', '30 MB', '40 MB', '50 MB']; var realValues2 = [0, 8, 16, 24]; var labelValuesTwo = ['LOW', 'LOW', 'MEDIUM', 'HIGH']; $(document).ready(function() {//wait until the DOM is ready before creating sliders var ex1 = $('#ex1').slider({ value: 0, max: 4, min: 0, step: 1, formatter: formatterFunction }); var ex2 = $('#ex2').slider({ value: 0, max: 3, min: 0, step: 1, formatter: formatterFunction }); $(ex1).change(function(data) { $("#valOne").val(realValues[data.value.newValue]); updateTotals(data); }); $(ex2).change(function(data) { $("#valTwo").val(realValues2[data.value.newValue]); updateTotals(data); }); }); //abstract out this function from the two change callback functions function updateTotals(data) { var valOne = $("#valOne").val(); var valTwo = $("#valTwo").val(); var totalBrowse = parseInt(valTwo, 10) * webBrowse; var totalEmail = parseInt(valOne, 10) * emailValue; var total = valOne + realValues2[data.value.newValue]; var totalData = parseInt(totalEmail, 10) + parseInt(totalBrowse, 10); $("#ex6SliderVal2").text(total); $("#TheSumMB").text(totalData + '' + ' MB'); $("#TotalAllocation").val(totalData); $("#webBrowse").text(totalBrowse + '' + ' MB'); $("#emailValue").text(totalEmail + '' + ' MB'); } function formatterFunction(val) { return labelValues[val]; } 

 .slider.slider-horizontal { width: 100% !important; height: 20px; } input[disabled] { text-align: right; cursor: default; width: 30%; border: 0px; background: transparent; } .tright { text-align: right; } .slideSmoth .slider-handle.round { border-radius: 50%; transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; transition: all 0.5s ease; } .slideSmoth .slider.slider-horizontal .slider-track { height: 15px; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .slideSmoth .slider-track, .slideSmoth .slider-handle, .slider-selection.tick-slider-selection { background: rgba(251, 251, 251, 0.8); } .slideSmoth .slider-handle { margin-top: -3px !important; } .slideSmoth .slider-tick { display: none; } #TotalAllocation { width: 200px; font-size: 50px; display: none; } #TheSumMB { width: 200px; font-size: 50px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/css/bootstrap-slider.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/bootstrap-slider.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <div class="container"> <div class="container" style="margin-top:50px;"> <div class="col-md-3"> <input type="text" id="TotalAllocation" class="TotalAllocation" value="0" disabled/> <span id="totalData"><!--TOTAL DATA:--> <span id="TheSumMB">0 MB</span></span> </div> </div> <div class="row"> <div class="col-xs-12" id="demoContainer"> <!-- start--> <div class="col-md-6"> <div class="container-holder" style="margin-top:50px;"> <div class="col-md-8"> <h4>Internet</h4> </div> <div class="col-md-4 tright"> <input class="valTwo" disabled id="valTwo" type="text" value="0">hr / <span id="totalBrowse"><span id="webBrowse">0</span></span> </div> <div> <input data-slider-id='ex1Slider2' id="ex2" type="text"> </div> </div> <div class="container-holder" style="margin-top:50px;"> <div class="col-md-8"> <h4>Emails</h4> </div> <div class="col-md-4 tright"> <input class="valOne" disabled id="valOne" type="text" value="0">hr / <span id="totalEmail"><span id="emailValue">0</span></span> </div> <div> <input data-slider-id='ex1Slider' id="ex1" type="text"> </div> </div> </div> <!-- end --> </div> </div> </div>