亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

jQuery - 兩個 .on('change') 事件不能同時工作。一次只工作一個

jQuery - 兩個 .on('change') 事件不能同時工作。一次只工作一個

斯蒂芬大帝 2021-11-18 16:19:03
我正在嘗試為我的家人制作一個“工作時間”計算器。我想為所有“默認工作開始時間、默認結束時間和默認休息時間”提供可重用的 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>
查看完整描述

2 回答

?
MYYA

TA貢獻1868條經驗 獲得超4個贊

如果您可以選擇使用任何 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>


查看完整回答
反對 回復 2021-11-18
?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

我什至不認為你需要跟蹤，除非有其他原因，但我把它放在那里，因為這是問題 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>


查看完整回答
反對 回復 2021-11-18
  • 2 回答
  • 0 關注
  • 527 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號