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() {

  // This is for populating the values

  $('.calculator-head .default-times select').each(function() {

    var selectElement = $(this);

    if (selectElement.hasClass('hour')) {

      for (var i = 0; i < 24; i++) {

        selectElement.append('<option value="' + i + '">' + i + '</option>');

      }

    } else if (selectElement.hasClass('minute')) {

      for (var i = 0; i < 60; i++) {

        selectElement.append('<option value="' + i + '">' + i + '</option>');

      }

    }

  });

  $('.default-times select').on('change', function(e) {

    var myObj = {

      start: {

        hour: $('.default-times .start select.hour').val(),

        minute: $('.default-times .start select.minute').val()

      },

      end: {

        hour: $('.default-times .end select.hour').val(),

        minute: $('.default-times .end select.minute').val()

      },

      break: {

        hour: $('.default-times .break select.hour').val(),

        minute: $('.default-times .break select.minute').val()

      }

    }

    console.log(myObj);

  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="calculator-head">

  <div class="default-times">

    <div class="start">

      <span>Default start time</span>

      <div class="select-area">

        <select title="Start Time Hours" class="hour"></select>

        <label class="hour">Hours</label>

        <select title="Start Time Minutes" class="minute"></select>

        <label class="minute">Minutes</label>

      </div>

    </div>

    <div class="end">

      <span>Default End time</span>

      <div class="select-area">

        <select title="End Time Hours" class="hour"></select>

        <label class="hour">Hours</label>

        <select title="End Time Minutes" class="minute"></select>

        <label class="minute">Minutes</label>

      </div>

    </div>

    <div class="break">

      <span>Default Break time</span>

      <div class="select-area">

        <select title="Break Time Hours" class="hour"></select>

        <label class="hour">Hours</label>

        <select title="Break Time Minutes" class="minute"></select>

        <label class="minute">Minutes</label>

      </div>

    </div>

  </div>

</div>

Answer 2

我什至不认为你需要跟踪，除非有其他原因，但我把它放在那里，因为这是问题 myApp.currentChange = {id: myId,value:myVal};

让我们在此处的演示中使其更易于管理，让我们创建一个myApp来保存值和一个小时和分钟的数组，以便我们可以在此处为我们的演示代码添加选项。

我在每个上都设置了一个类，<select>以便更容易地连接。

现在我们可以switch通过嗅探 id 然后设置正确的值来简单地检查元素何时更改。这也可以是类似data-target="breakHour"或类似的东西，以防止 ID 混入此处。这应该从理解和代码的角度简化整个事情。

这里没有验证，例如你的开始应该在你结束之前（它是同一天），休息应该在两者之间（如果是长时间班次，你需要两次休息吗？）等等。我会把这个练习留给你，因为它不是问题的一部分。

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">&nbsp;</div>