我正在为我的家人制作一个“工作时间”计算器。我希望所有“默认工作开始时间，默认结束时间和默认休息时间”都具有可重用的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>
<div class="calculator__head--default-times--end">
<span>Default End time</span>
<div class="select-area">
<select id="default-hour-select-end">
</select>
<label for="default-hour-select-end">Hours</label>
<select 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 id="default-hour-select-break">
</select>
<label for="default-hour-select-break">Hours</label>
<select id="default-minute-select-break">
</select>
<label for="default-minute-select-break">Minutes</label>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
如果可以选择具有任何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>
答案 1 :(得分：-1)
除非有其他原因，我什至认为您无需跟踪此信息，但我将其放在其中，因为这是import org.apache.spark.sql.expressions.UserDefinedFunction
import org.apache.spark.sql.functions.udf
import org.apache.spark.sql.functions.col
import spark.implicits._
val df = spark.sparkContext.parallelize(Seq(1,3)).toDF("index")
val rangeDF = df.withColumn("range", indexToRange(col("index")))
rangeDF.show(10)
def indexToRange: UserDefinedFunction = udf((index: Integer) => for (i <- 0 to index) yield i)
让我们在这里的演示更加易于管理，让我们创建一个myApp.currentChange = {id: myId,value:myVal};来保存值和一个小时和分钟的数组，以便我们可以在此处为我们的演示代码添加选项。
我在每个myApp上都设置了一个类，以使其易于接线。
现在，我们可以通过嗅探id并设置适当的值来简单地检查何时使用<select>更改了元素。也可能是类似switch之类的东西，或者是一些用来使ID不在此处的东西。从理解和代码的角度来看，这应该可以简化整个过程。
这里没有验证，例如您的开始应该在结束之前（同一天），休息应该在之间（如果是长班，您需要两次休息吗？）等。我将离开对您来说，这不是问题的一部分。
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;
}