Блок слайдера серии Bootstrap комбинирует функцию обмена, вместо того чтобы повторять функцию 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'); 
} 

Затем ссылаться на эту функцию обратного вызова при привязке к событию изменения:

$(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() description).

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>