Я даже не думаю, что вам нужно отслеживать это, если нет какой-либо другой причины, НО я поставил это там, так как это вопрос с myApp.currentChange = {id: myId,value:myVal};
Давайте сделаем это немного более управляемымдля нашей демонстрации здесь давайте создадим myApp для хранения значений и массива для часов и минут, чтобы мы могли добавить оттуда параметры для нашего демонстрационного кода.
Я установил класс для каждого из<select> для облегчения подключения.
Теперь мы можем просто проверить, когда элемент изменился с помощью switch, проанализировав идентификатор и затем установив правильное значение. Это также может быть что-то вроде data-target="breakHour" или что-то подобное, чтобы идентификаторы не попадали сюда. Это должно немного упростить все это с точки зрения понимания и кодирования.
Здесь нет никакой проверки, как, например, ваш старт должен наступить раньше вашего конца (это тот же день), перерыв должен быть между (вам нужны два перерыва, если это большая смена?) и т. д. Я оставлю это упражнение вам, поскольку оно не является частью вопроса.
var myApp = myApp || {
break: {
hour: 0,
minute: 0
},
start: {
hour: 0,
minute: 0
},
end: {
hour: 0,
minute: 0
},
defaultHours: [...Array(24).keys()],
defaultMinutes: [...Array(60).keys()],
setupOptions: function(selector, values) {
let $el = $(selector);
for (let i = 0; i < values.length; i++) {
let opt = "<option value='" + values[i] + "'>" + values[i] + "</option>";
$el.append(opt);
}
}
};
$(function() {
// this could be in a loop by putting the ID's in an array or something also
myApp.setupOptions("#default-hour-select-start", myApp.defaultHours);
myApp.setupOptions("#default-minute-select-start", myApp.defaultMinutes);
myApp.setupOptions("#default-hour-select-end", myApp.defaultHours);
myApp.setupOptions("#default-minute-select-end", myApp.defaultMinutes);
myApp.setupOptions("#default-hour-select-break", myApp.defaultHours);
myApp.setupOptions("#default-minute-select-break", myApp.defaultMinutes);
$('.calculator__head')
.on('change', '.my-select-thing', function(event) {
let me = $(this);
let myId = me.attr("id");
let myVal = me.val();
myApp.currentChange = {id: myId,value:myVal};
//alert(myVal);
//console.log(myVal);
//what changed:
switch (myId) {
case "default-hour-select-start":
myApp.start.hour = myVal;
break;
case "default-minute-select-start":
myApp.start.minute = myVal;
break;
case "default-hour-select-break":
myApp.break.hour = myVal;
break;
case "default-minute-select-break":
myApp.break.minute = myVal;
break;
case "default-hour-select-end":
myApp.end.hour = myVal;
break;
case "default-minute-select-end":
myApp.end.minute = myVal;
break;
default:
console.log('Sorry, I did not set up ' + meId);
}
// just to show it changing
$('#what-changed').html("<span>Id:" + myApp.currentChange.id + " val:" + myApp.currentChange.value + "</span>");
});
});
#what-changed {
border: solid 1px #EEEEEE;
margin: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="calculator__head">
<div class="calculator__head--default-times">
<div class="calculator__head--default-times--start">
<span>Default start time</span>
<div class="select-area">
<select class="my-select-thing" id="default-hour-select-start">
</select>
<label for="default-hour-select-start">Hours</label>
<select class="my-select-thing" id="default-minute-select-start">
</select>
<label for="default-minute-select-start">Minutes</label>
</div>
</div>
<div class="calculator__head--default-times--end">
<span>Default End time</span>
<div class="select-area">
<select class="my-select-thing" id="default-hour-select-end">
</select>
<label for="default-hour-select-end">Hours</label>
<select class="my-select-thing" id="default-minute-select-end">
</select>
<label for="default-minute-select-end">Minutes</label>
</div>
</div>
<div class="calculator__head--default-times--break">
<span>Default Break time</span>
<div class="select-area">
<select class="my-select-thing" id="default-hour-select-break">
</select>
<label for="default-hour-select-break">Hours</label>
<select class="my-select-thing" id="default-minute-select-break">
</select>
<label for="default-minute-select-break">Minutes</label>
</div>
</div>
</div>
</div>
<div id="what-changed"> </div>