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);
});

请参阅下面的操作，其中 formatter 函数也已被抽象为一个公共函数（即formatterFunction）。可以注意到，10被作为第二个参数传递给parseInt，因为如果解析的数字以0开头（参见parseInt() description以获取更多信息），这是一种很好的做法。

＆＃13;

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];
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Bootstrap范围滑块结合onchange功能而不是重复onchange功能？

1 个答案: