几个月没有录有关Elementor的教程了，前几天心血来潮做了个，这不来了嘛~
这次的教程很简单，根据用户在我们Elementor的表单上选择的选项出现对应的表单字段。这是一种让我们的表单跟整齐干净的一种做法，而不是全部字段堆在一起。使用到的是PRO自带的表单widget，如果你有的是Elementor免费版，是没有这个的。你可以直接使用一些表单插件，有些是带这个功能的。
下面是需要用到的代码（别慌）
条件逻辑代码
<script>
let showThisFieldIf = {
显示的ID: {
条件ID: [数字],
},
}
document.addEventListener('DOMContentLoaded', conditionalFormFieldFunc);
document.addEventListener('DOMContentLoaded',function(){
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
conditionalFormFieldFunc();
});
});
function conditionalFormFieldFunc() {
function testLogic() {
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
let conditionalInput = setInputsElemArray(conditionalInputID);
let match = true;
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
let selectedInputs = [];
inputs.forEach((input, i) => { if (input.checked) { selectedInputs.push(i); } });
if (inputs[0].tagName == 'SELECT') {
selectedInputs.push(inputs[0].selectedIndex);
}
let adjustedConditionValues = conditionValues.map(e => e - 1);
if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
match = false;
}
};
if (match) {
conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "block")
} else {
conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "none")
}
}
}
testLogic();
/* Add event listeners */
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
inputs.forEach(input => {
input.addEventListener('input', function () {
testLogic();
})
})
}
}
function setInputsElemArray(ID) {
let selectors = `[name="form_fields[${ID}]"]`;
let inputs = Array.from(document.querySelectorAll(selectors));
if (!inputs.length) {
selectors = `[name="form_fields[${ID}][]"]`;
inputs = Array.from(document.querySelectorAll(selectors));
}
return inputs;
}
};
</script>
你看到这么一长串代码可能会有点不知所措，其实我们真正需要修改到的就一点点，就下面这一串。
let showThisFieldIf = {
显示的ID: {
条件ID: [数字],
},
}
使用步骤
首先我们要做的就是不管什么隐不隐藏，把表单上全部需要用到的字段都做出来。
我们主要用到的就是Radio，Selector 和 Checkbox 这3个选择来玩。每个字段在高级里我们都可以自定义一个ID，它自己也会生成不过建议改一下，这对我们之后很重要。
全部字段做好后，我们加一个HTML组件把完整的代码加进去。根据我们给每个字段改的ID修改就可以了。
let showThisFieldIf = {
显示的ID: {
条件ID: [数字],
},
}
显示的ID：指的是我们要隐藏的字段。
条件ID：指的是满足显示条件的字段。
[数字]：指的是条件ID要满足的选项。
不管你选的是Radio，Selector 还是 Checkbox，都会有一个options选项，这里面每个选项都是单独的一行，每一行代表一个数字。
设计：1
开发：2
SEO：3
其他：4
这就是我们要在代码 [数字] 里写的。
AND 和 OR 条件逻辑
这个代码默认是AND逻辑，也就是说，你在 [数字] 填写多个选项时，必须得全部都满足才行。
修改成OR很简单，我们找到下面这串代码
if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
match = false;
}
};里面有一个EVERY，把它改成OR就可以了。这样只要满足一个 [数字] 里的选项就会出现字段。
