我有两个功能,第一个检查具有必需属性且为空的所有字段。如果是这样,“ toast”(来自Materialize CSS)会通知用户X字段为必填字段,并提供一个链接以关注该字段,单击该链接时,该链接将专注于该字段。
我已经开始使用它了,但是我对为什么它甚至可以那样工作感到困惑。我将bugElems [i] .id传递给第二个函数,当我在第一个函数中登录时,它显示了我所期望的:我正在查看的元素的ID。当我记录第二个函数的参数时,它向我展示了整个HTML元素本身及其所有属性,而不仅仅是ID,正如我期望的那样。我觉得我很多余,但这就是Javascript想要的。
function validateFields() {
var bugForm = document.getElementById("bugForm");
var bugElems = bugForm.elements;
for (i = 0; i < bugElems.length; i++){
if(bugElems[i].value === '' && bugElems[i].hasAttribute('required')){
M.toast({
html: bugElems[i].previousElementSibling.innerHTML + ' is required' + '<button class="btn-flat toast-action" onclick="toastFocus(' + bugElems[i].id + ')">Goto</button>',
displayLength: 5000
});
console.log(bugElems[i].id,bugElems[i]);
};
}
}
function toastFocus(e) {
console.log(e.id,e);
document.getElementById(e.id).focus();
}
validateFields()函数中的日志显示以下内容:
caseNumber <input type="text" id="caseNumber" required="">
并且toastFocus()函数下的日志显示完全相同:
caseNumber <input type="text" id="caseNumber" required="">
同样,我希望它能与当前的迭代一起工作,但我不明白为什么会起作用。我将bugElems [i] .id传递给toastFocus,然后不得不再次询问ID,因为它给了我其他东西。请帮助我理解,谢谢。
编辑:
我一直在进行修改,并将代码稍微更改为三个功能,以使第一个吐司没有按钮和自动对焦功能(再次,所有功能仍可按需运行)。那个似乎传递了元素ID,正如我期望的那样,但是它没有包装在Materialize CSS对象HTML的东西中。现在整个混乱看起来像这样:
function validateFields() {
var bugForm = document.getElementById("bugForm");
var bugElems = bugForm.elements;
var x = 0;
M.Toast.dismissAll();
for (i = 0; i < bugElems.length; i++){
if(bugElems[i].value === '' && bugElems[i].hasAttribute('required')){
if(x == 0){
M.toast({
html: bugElems[i].previousElementSibling.innerHTML + ' is required',
displayLength: 5000
});
toastFocus(bugElems[i].id);
x++;
} else {
M.toast({
html: bugElems[i].previousElementSibling.innerHTML + ' is required' + '<button class="btn-flat toast-action" onclick="toastFocusClick(' + bugElems[i].id + ')">Goto</button>',
displayLength: 5000
});
}
};
}
}
function toastFocus(f) {
document.getElementById(f).focus();
}
function toastFocusClick(e) {
M.Toast.dismissAll();
document.getElementById(e.id).focus();
}
在您的示例中,validateFields()和toastFocus()函数的日志显示相同的元素,但随后您说:
[我将bugElems [i] .id传递给toastFocus,然后不得不再次询问ID,因为它给了我其他东西。
你能澄清这个吗?