jQuery - 两个 .on('change') 事件不能同时工作。一次只工作一个

Question

我正在尝试为我的家人制作一个“工作时间”计算器。我想为所有“默认工作开始时间、默认结束时间和默认休息时间”提供可重用的 JavaScript 代码。

我只是想创建一个函数，它在发生更改时从每个区域获取 ID，并将值分配给 defaultStart、DefaultEnd、defaultBreak 对象，具体取决于它们来自的区域。

我正在使用动态生成的元素，因此我不必手动编写分钟和小时。

我尝试了以下代码：

// This is my object

     const defaultBreak = {

     hour: "0",

     minute: "0"

}

let currentFocus; // The currentFocus which changes its value whenever 

                     there is a change in document

// Gets the targeted ID and assigns to currentFocus

$(document).on('change', function (e) {

    currentFocus = `#` + e.target.id;

    console.log(`${currentFocus}`);

});

// Here comes my problem. 

// I want to have `${currentFocus}` as a variable, so later in the 

// code I can do 

// if (currentFocus == break-hours)

// {defaultBreak.hours = this.val();

$('.calculator__head').on('change', `${currentFocus}`, function () {

    alert($(this).val());

    // This will be changed to 'if else' later.

    defaultBreak.hour = $(this).val();

    // console.log(defaultBreak)

});

我的 HTML 是

            <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 id="default-hour-select-start">

                            </select>

                            <label for="default-hour-select-start">Hours</label>

                            <select id="default-minute-select-start">

                            </select>

                            <label for="default-minute-select-start">Minutes</label>

                        </div>

                    </div>

Answer 1

如果您可以选择使用任何 HTML 结构，您可以像以下示例一样简化它。良好的结构将帮助您在将来使用Selectors访问项目时节省时间。$(document).ready(function() {&nbsp; // This is for populating the values&nbsp; $('.calculator-head .default-times select').each(function() {&nbsp; &nbsp; var selectElement = $(this);&nbsp; &nbsp; if (selectElement.hasClass('hour')) {&nbsp; &nbsp; &nbsp; for (var i = 0; i < 24; i++) {&nbsp; &nbsp; &nbsp; &nbsp; selectElement.append('<option value="' + i + '">' + i + '</option>');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else if (selectElement.hasClass('minute')) {&nbsp; &nbsp; &nbsp; for (var i = 0; i < 60; i++) {&nbsp; &nbsp; &nbsp; &nbsp; selectElement.append('<option value="' + i + '">' + i + '</option>');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });&nbsp; $('.default-times select').on('change', function(e) {&nbsp; &nbsp; var myObj = {&nbsp; &nbsp; &nbsp; start: {&nbsp; &nbsp; &nbsp; &nbsp; hour: $('.default-times .start select.hour').val(),&nbsp; &nbsp; &nbsp; &nbsp; minute: $('.default-times .start select.minute').val()&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; end: {&nbsp; &nbsp; &nbsp; &nbsp; hour: $('.default-times .end select.hour').val(),&nbsp; &nbsp; &nbsp; &nbsp; minute: $('.default-times .end select.minute').val()&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; break: {&nbsp; &nbsp; &nbsp; &nbsp; hour: $('.default-times .break select.hour').val(),&nbsp; &nbsp; &nbsp; &nbsp; minute: $('.default-times .break select.minute').val()&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; console.log(myObj);&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="calculator-head">&nbsp; <div class="default-times">&nbsp; &nbsp; <div class="start">&nbsp; &nbsp; &nbsp; <span>Default start time</span>&nbsp; &nbsp; &nbsp; <div class="select-area">&nbsp; &nbsp; &nbsp; &nbsp; <select title="Start Time Hours" class="hour"></select>&nbsp; &nbsp; &nbsp; &nbsp; <label class="hour">Hours</label>&nbsp; &nbsp; &nbsp; &nbsp; <select title="Start Time Minutes" class="minute"></select>&nbsp; &nbsp; &nbsp; &nbsp; <label class="minute">Minutes</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="end">&nbsp; &nbsp; &nbsp; <span>Default End time</span>&nbsp; &nbsp; &nbsp; <div class="select-area">&nbsp; &nbsp; &nbsp; &nbsp; <select title="End Time Hours" class="hour"></select>&nbsp; &nbsp; &nbsp; &nbsp; <label class="hour">Hours</label>&nbsp; &nbsp; &nbsp; &nbsp; <select title="End Time Minutes" class="minute"></select>&nbsp; &nbsp; &nbsp; &nbsp; <label class="minute">Minutes</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="break">&nbsp; &nbsp; &nbsp; <span>Default Break time</span>&nbsp; &nbsp; &nbsp; <div class="select-area">&nbsp; &nbsp; &nbsp; &nbsp; <select title="Break Time Hours" class="hour"></select>&nbsp; &nbsp; &nbsp; &nbsp; <label class="hour">Hours</label>&nbsp; &nbsp; &nbsp; &nbsp; <select title="Break Time Minutes" class="minute"></select>&nbsp; &nbsp; &nbsp; &nbsp; <label class="minute">Minutes</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

我什至不认为你需要跟踪，除非有其他原因，但我把它放在那里，因为这是问题 myApp.currentChange = {id: myId,value:myVal};让我们在此处的演示中使其更易于管理，让我们创建一个myApp来保存值和一个小时和分钟的数组，以便我们可以在此处为我们的演示代码添加选项。我在每个上都设置了一个类，<select>以便更容易地连接。现在我们可以switch通过嗅探 id 然后设置正确的值来简单地检查元素何时更改。这也可以是类似data-target="breakHour"或类似的东西，以防止 ID 混入此处。这应该从理解和代码的角度简化整个事情。这里没有验证，例如你的开始应该在你结束之前（它是同一天），休息应该在两者之间（如果是长时间班次，你需要两次休息吗？）等等。我会把这个练习留给你，因为它不是问题的一部分。var myApp = myApp || {&nbsp; break: {&nbsp; &nbsp; hour: 0,&nbsp; &nbsp; minute: 0&nbsp; },&nbsp; start: {&nbsp; &nbsp; hour: 0,&nbsp; &nbsp; minute: 0&nbsp; },&nbsp; end: {&nbsp; &nbsp; hour: 0,&nbsp; &nbsp; minute: 0&nbsp; },&nbsp; defaultHours: [...Array(24).keys()],&nbsp; defaultMinutes: [...Array(60).keys()],&nbsp; setupOptions: function(selector, values) {&nbsp; &nbsp; let $el = $(selector);&nbsp; &nbsp; for (let i = 0; i < values.length; i++) {&nbsp; &nbsp; &nbsp; let opt = "<option value='" + values[i] + "'>" + values[i] + "</option>";&nbsp; &nbsp; &nbsp; $el.append(opt);&nbsp; &nbsp; }&nbsp; }};$(function() {&nbsp; // this could be in a loop by putting the ID's in an array or something also&nbsp; myApp.setupOptions("#default-hour-select-start", myApp.defaultHours);&nbsp; myApp.setupOptions("#default-minute-select-start", myApp.defaultMinutes);&nbsp; myApp.setupOptions("#default-hour-select-end", myApp.defaultHours);&nbsp; myApp.setupOptions("#default-minute-select-end", myApp.defaultMinutes);&nbsp; myApp.setupOptions("#default-hour-select-break", myApp.defaultHours);&nbsp; myApp.setupOptions("#default-minute-select-break", myApp.defaultMinutes);&nbsp; $('.calculator__head')&nbsp; &nbsp; .on('change', '.my-select-thing', function(event) {&nbsp; &nbsp; &nbsp; let me = $(this);&nbsp; &nbsp; &nbsp; let myId = me.attr("id");&nbsp; &nbsp; &nbsp; let myVal = me.val();&nbsp; &nbsp; &nbsp; myApp.currentChange = {id: myId,value:myVal};&nbsp; &nbsp; &nbsp; //alert(myVal);&nbsp; &nbsp; &nbsp; //console.log(myVal);&nbsp; &nbsp; &nbsp; //what changed:&nbsp; &nbsp; &nbsp; switch (myId) {&nbsp; &nbsp; &nbsp; &nbsp; case "default-hour-select-start":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myApp.start.hour = myVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "default-minute-select-start":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myApp.start.minute = myVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "default-hour-select-break":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myApp.break.hour = myVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "default-minute-select-break":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myApp.break.minute = myVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "default-hour-select-end":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myApp.end.hour = myVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "default-minute-select-end":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myApp.end.minute = myVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Sorry, I did not set up ' + meId);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // just to show it changing&nbsp; &nbsp; &nbsp; $('#what-changed').html("<span>Id:" +&nbsp; myApp.currentChange.id + " val:" +&nbsp; myApp.currentChange.value + "</span>");&nbsp; &nbsp; });});#what-changed {&nbsp; border: solid 1px #EEEEEE;&nbsp; margin: 1em;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div class="calculator__head">&nbsp; <div class="calculator__head--default-times">&nbsp; &nbsp; <div class="calculator__head--default-times--start">&nbsp; &nbsp; &nbsp; <span>Default start time</span>&nbsp; &nbsp; &nbsp; <div class="select-area">&nbsp; &nbsp; &nbsp; &nbsp; <select class="my-select-thing" id="default-hour-select-start">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <label for="default-hour-select-start">Hours</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="my-select-thing" id="default-minute-select-start">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <label for="default-minute-select-start">Minutes</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="calculator__head--default-times--end">&nbsp; &nbsp; &nbsp; <span>Default End time</span>&nbsp; &nbsp; &nbsp; <div class="select-area">&nbsp; &nbsp; &nbsp; &nbsp; <select class="my-select-thing" id="default-hour-select-end">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <label for="default-hour-select-end">Hours</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="my-select-thing" id="default-minute-select-end">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <label for="default-minute-select-end">Minutes</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="calculator__head--default-times--break">&nbsp; &nbsp; &nbsp; <span>Default Break time</span>&nbsp; &nbsp; &nbsp; <div class="select-area">&nbsp; &nbsp; &nbsp; &nbsp; <select class="my-select-thing" id="default-hour-select-break">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <label for="default-hour-select-break">Hours</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="my-select-thing" id="default-minute-select-break">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <label for="default-minute-select-break">Minutes</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><div id="what-changed">&nbsp;</div>