javascript迭代来更改元素的inner.html

Question

我在javascript代码中处理DOM事件时遇到问题

1.第一个字段：选择类型

2.第二个字段：根据第一个字段的选定类型(id(字段，第二个字段显示值。

因此，根据所选类型(id(，我重置第二个字段的所有值，并添加链接到当前所选类型的新值。

在类型更改时，每次调用函数时：

• 清除值​​来自第二个字段
• 添加值​​链接到当前所选类型(id(的

我正在尝试创建一个函数来更改值​​更改类型时：

function ManageOptions() {
let optionsFaturamento = document.querySelectorAll(".options-faturamento");
let mode = document.querySelector(".selected").getAttribute("data-value");
data.forEach((value) => {
if (value.id == mode) {
value.FATURAMENTO.forEach((faturamento) => {
optionsFaturamento.forEach((item) => {
let input = item.querySelector("input");
let label = item.querySelector("label");
input.value = faturamento.id;
label.innerHTML = faturamento.name;
});
});
}
});
}

但我在做这些迭代时遇到了问题我需要通过billing.name更改每个字段的inner.html/值和faturamento.id

如果没有其他东西可以迭代，则删除与faturamento迭代不兼容的元素

const data = [
{
id: 1,
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
maxFuncionario: 1,
socioIncrease: 0,
maxSocio: 5,
FATURAMENTO: [
{
id: 1,
name: "ATÉ 10.000,00",
value: 49.99,
},
{
id: 2,
name: "De 70.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
id: 2,
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
maxFuncionario: 3,
socioIncrease: 25,
maxSocio: 5,
FATURAMENTO: [
{
id: 1,
name: "ATÉ 20.000,00",
value: 149.99,
},
{
id: 2,
name: "De 80.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
{
id: 3,
name: "SIMPLES NACIONAL – COMÉRCIO",
funcionarioIncrease: 25,
maxFuncionario: 3,
socioIncrease: 25,
maxSocio: 5,
FATURAMENTO: [
{
id: 1,
name: "ATÉ 30.000,00",
value: 199.99,
},
{
id: 2,
name: "De 90.001,00 a 50.000,00",
value: 249.99,
},
],
},
];
function createInput(prefix, id, inputName) {
let inputRadio = document.createElement("input");
if (id) {
inputRadio.id = prefix + "-" + id;
inputRadio.name = inputName;
inputRadio.type = "radio";
inputRadio.value = id;
inputRadio.classList.add("radio");
return inputRadio;
}
return null;
}
function ManageOptions() {
let optionsFaturamento = document.querySelectorAll(".options-faturamento");
let mode = document.querySelector(".selected").getAttribute("data-value");
data.forEach((value) => {
if (value.id == mode) {
value.FATURAMENTO.forEach((faturamento) => {
optionsFaturamento.forEach((item) => {
let input = item.querySelector("input");
let label = item.querySelector("label");
input.value = faturamento.id;
label.innerHTML = faturamento.name;
});
});
}
});
}
function createFaturamento() {
let container = document.querySelector(".faturamento-container");
let selectedFaturamento = document.querySelector(".faturamentoSelected");
let mode = document.querySelector(".selected").getAttribute("data-value");
console.log(mode);
data.forEach((value) => {
if (value.id == mode) {
value.FATURAMENTO.forEach((faturamento) => {
let optionDiv = document.createElement("div");
optionDiv.classList.add("options-faturamento");
container.append(optionDiv);
let input = createInput("feat", faturamento.id, "faturamento");
if (!input) {
return null;
}
optionDiv.append(input);
let label = document.createElement("label");
label.htmlFor = "feat-" + faturamento.id;
label.innerHTML = faturamento.name;
optionDiv.append(label);
if (faturamento.id == 1) {
selectedFaturamento.innerHTML = faturamento.name;
selectedFaturamento.setAttribute("data-value", faturamento.id);
}
if (faturamento.id == 1 && value.id == 1) {
selectedFaturamento.innerHTML = faturamento.name;
selectedFaturamento.setAttribute("data-value", faturamento.id);
}
});
}
});
}
function createModeOptions() {
let container = document.querySelector(".options-container");
let selectedMode = document.querySelector(".selected");
data.forEach((value) => {
let optionDiv = document.createElement("div");
optionDiv.classList.add("options-services");
container.append(optionDiv);
let input = createInput("value", value.id, "types");
if (!input) {
return null;
}
optionDiv.append(input);
var label = document.createElement("label");
label.htmlFor = "value-" + value.id;
label.innerHTML = value.name;
optionDiv.append(label);
if (value.id == 1) {
selectedMode.innerHTML = value.name;
selectedMode.setAttribute("data-value", value.id);
}
});
}
function initalize() {
//variables modes
let container = document.querySelector(".options-container");
let selectedMode = document.querySelector(".selected");
let options = document.querySelectorAll(".options-services");
//variables faturamento
let selectedFaturamento = document.querySelector(".faturamentoSelected");
let faturamentoContainer = document.querySelector(".faturamento-container");
let optionsFaturamento = document.querySelectorAll(".options-faturamento");
//events
container.addEventListener("change", () => {
ManageOptions();
});
faturamentoContainer.addEventListener("change", () => {
console.log(optionsFaturamento);
});
selectedMode.addEventListener("click", () => {
faturamentoContainer.classList.remove("active");
container.classList.toggle("active");
});
selectedFaturamento.addEventListener("click", () => {
faturamentoContainer.classList.toggle("active");
});
for (let value of options) {
value.addEventListener("click", () => {
let input = value.querySelector("input").value;
selectedMode.innerHTML = value.querySelector("label").innerHTML;
selectedMode.setAttribute("data-value", input);
container.classList.remove("active");
});
}
for (let value of optionsFaturamento) {
value.addEventListener("click", () => {
console.log("on options");
let input = o.querySelector("input").value;
selectedFaturamento.innerHTML = o.querySelector("label").innerHTML;
selectedFaturamento.setAttribute("data-value", input);
faturamentoContainer.classList.remove("active");
container.classList.remove("active");
});
}
}
createModeOptions();
createFaturamento();
initalize();

/* custom select faturamento */
.option-faturamento {
border-radius: 8px;
}
.faturamento-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
}
.faturamento-container {
padding: 0;
background: #fff;
color: #000;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border: 1px solid #dadada;
border-radius: 8px;
position: absolute;
overflow: hidden;
order: 1;
top: 120%;
}
.faturamento-container::after {
position: absolute;
display: block;
content: "";
bottom: 100%;
right: 25px;
width: 7px;
height: 7px;
margin-bottom: -3px;
border-top: 1px solid #dadada;
border-left: 1px solid #dadada;
background: #fff;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
}
.faturamentoSelected {
width: 100%;
font-size: 1rem;
outline: none;
border: 1px solid #ffb24f;
border-radius: 5px;
padding: 1rem 0.7rem;
font-family: "Poppins";
background: #00416a;
color: #ffb24f;
transition: 0.1s ease-out;
position: relative;
order: 0;
}
.faturamentoSelected::before {
background: none;
border: 1px solid #ffb24f;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
pointer-events: none;
}
.faturamentoSelected::after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 25px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
transition: all 0.4s;
}
.faturamento-container.active {
max-height: 240px;
opacity: 1;
padding: 10px 0;
overflow: visible;
z-index: 999;
}
.faturamento-box .faturamento-container.active + .faturamentoSelected::after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.faturamento-container::-webkit-scrollbar {
width: 8px;
background: #fff;
border-radius: 0 8px 8px 0;
}
.faturamento-container::-webkit-scrollbar-thumb {
background: #dadada;
border-radius: 0 8px 8px 0;
}
.faturamento-box .option-faturamento,
.faturamentoSelected {
padding: 12px 24px;
cursor: pointer;
}
.faturamento-box label {
cursor: pointer;
font-family: "Poppins";
color: orange;
}
.faturamento-box label:hover {
color: orange;
}
.faturamento-box .options-faturamento .radio {
display: none;
}
.options-faturamento {
padding: 12px 24px;
cursor: pointer;
}
/* custom select faturamento */
/*custom select services2 */
.option {
border-radius: 8px;
}
.select-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
}
.select-box .options-container {
padding: 0;
background: #fff;
color: #000;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border: 1px solid #dadada;
border-radius: 8px;
position: absolute;
overflow: hidden;
order: 1;
top: 120%;
}
.select-box .options-container::after {
position: absolute;
display: block;
content: "";
bottom: 100%;
right: 25px;
width: 7px;
height: 7px;
margin-bottom: -3px;
border-top: 1px solid #dadada;
border-left: 1px solid #dadada;
background: #fff;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
}
.selected {
width: 100%;
font-size: 1rem;
outline: none;
border: 1px solid #ffb24f;
border-radius: 5px;
padding: 1rem 0.7rem;
font-family: "Poppins";
background: #00416a;
color: #ffb24f;
transition: 0.1s ease-out;
position: relative;
order: 0;
}
.selected::before {
background: none;
border: 1px solid #ffb24f;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
pointer-events: none;
}
.selected::after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 25px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
padding: 10px 0;
overflow: visible;
z-index: 999;
}
.select-box .options-container.active + .selected::after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #fff;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #dadada;
border-radius: 0 8px 8px 0;
}
.select-box .options-services,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box label {
cursor: pointer;
font-family: "Poppins";
color: orange;
}
.select-box label:hover {
color: orange;
}
.select-box .options-services .radio {
display: none;
}
/* input funcionario*/

<div class="custom_select flex">
<h3 class="textfield_label">
Selecione a categoria da sua Empresa
</h3>
<div class="select-box">
<div class="options-container"></div>
<div class="selected">
Selecione um Tipo de Serviço
</div>
</div>
</div>
<div id="faturamento" class="custom_select flex">
<h3 class="textfield_label">
Selecione o faturamento mensal da sua Empresa
</h3>
<div class="faturamento-box">
<div class="faturamento-container"></div>
<div class="faturamentoSelected">
Qual o faturamento mensal?
</div>
</div>
</div>

Answer 1

我已经在ES6 中重新设计了您的代码

const data = 
[ { id: 1
, name: "SIMPLES NACIONAL – MEI"
, funcionarioIncrease: 49.99
, maxFuncionario: 1
, socioIncrease: 0
, maxSocio: 5
, FATURAMENTO: 
[ { id: 1, name: "ATÉ 10.000,00",             value: 49.99 } 
, { id: 2, name: "De 70.001,00 a 50.000,00 ", value: 99.99 } 
] 
} 
, { id: 2
, name: "SIMPLES NACIONAL – SERVIÇOS"
, funcionarioIncrease: 25
, maxFuncionario: 3
, socioIncrease: 25
, maxSocio: 5
, FATURAMENTO: 
[ { id: 1, name: "ATÉ 20.000,00",             value: 149.99 } 
, { id: 2, name: "De 80.001,00 a 50.000,00 ", value: 199.99 } 
] 
} 
, { id: 3
, name: "SIMPLES NACIONAL – COMÉRCIO"
, funcionarioIncrease: 25
, maxFuncionario: 3
, socioIncrease: 25
, maxSocio: 5
, FATURAMENTO: 
[ { id: 1, name: "ATÉ 30.000,00",            value: 199.99 } 
, { id: 2, name: "De 90.001,00 a 50.000,00", value: 249.99 } 
] 
} 
] 
const DomParser = new DOMParser()
,   optionsContainer     = document.querySelector('div.select-box > div.options-container')
,   optionsSelected      = document.querySelector('div.select-box > div.selected')
,   faturamentoContainer = document.querySelector('div.faturamento-box > div.faturamento-container')
,   faturamentoSelected  = document.querySelector('div.faturamento-box > div.faturamentoSelected')
;
function newOptionService(id,name)
{
let elm = `n
<div class="options-services">
<input id="value-${id}" name="types" type="radio" value="${id}" class="radio">
<label for="value-${id}">${name}</label>
</div>n`
return DomParser.parseFromString( elm, 'text/html').body.firstChild
}
function newOptionFaturamento(id,name)
{
let elm = `n
<div class="options-faturamento">
<input id="feat-${id}" name="faturamento" type="radio" value="${id}" class="radio">
<label for="feat-${id}">${name}</label>
</div>n`
return DomParser.parseFromString( elm, 'text/html').body.firstChild
}
function setOptionsSelected(servicesRef)
{
optionsSelected.dataset.value = servicesRef.id
optionsSelected.textContent   = servicesRef.name
optionsContainer.querySelector(`input#value-${servicesRef.id}`).checked = true  
}
function setFaturamentoSelected(faturamentoRef)
{
faturamentoSelected.dataset.value = faturamentoRef.id
faturamentoSelected.textContent   = faturamentoRef.name
faturamentoContainer.querySelector(`input#feat-${faturamentoRef.id}`).checked = true   
}
function setFaturamentoContainer(servicesRef)
{
faturamentoContainer.innerHTML = null
let faturamentoRef = null
for (let info of servicesRef.FATURAMENTO)
{
if (!faturamentoRef) faturamentoRef = info
faturamentoContainer.appendChild( newOptionFaturamento( info.id, info.name ) )
}
setFaturamentoSelected(faturamentoRef)
}
optionsSelected.onclick=e=>
{
optionsContainer.classList.toggle('active')
}
faturamentoSelected.onclick=e=>
{
faturamentoContainer.classList.toggle('active')
}
// events delegations...
optionsContainer.onclick=e=>
{
let eInput = null
if (e.target.matches('.options-services'))
{ eInput = e.target.querySelector('input') }
else if (e.target.matches('.options-services label'))
{ eInput = e.target.parentNode.querySelector('input') }
if (!eInput) return // ignore others clicks
let servicesRef = data.find(info=>info.id==eInput.value)
setOptionsSelected(servicesRef)
setFaturamentoContainer(servicesRef)  
optionsContainer.classList.remove('active')
}
faturamentoContainer.onclick=e=>
{
let eInput = null
if (e.target.matches('.options-faturamento'))
{ eInput = e.target.querySelector('input') }
else if (e.target.matches('.options-faturamento label'))
{ eInput = e.target.parentNode.querySelector('input') }
if (!eInput) return // ignore others clicks
let servicesRef    = data.find(info=>info.id==optionsSelected.dataset.value)
let faturamentoRef = servicesRef.FATURAMENTO.find(info=>info.id==eInput.value)
setFaturamentoSelected(faturamentoRef)
faturamentoContainer.classList.remove('active')
}
(function initalize() // IIFE method
{
let servicesRef = null
for (let info of data)
{
if (!servicesRef) servicesRef = info
optionsContainer.appendChild( newOptionService( info.id, info.name ) )
}
setOptionsSelected(servicesRef)
setFaturamentoContainer(servicesRef)    
})()

/* custom select faturamento */
.option-faturamento {
border-radius: 8px;
}
.faturamento-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
}
.faturamento-container {
padding: 0;
background: #fff;
color: #000;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border: 1px solid #dadada;
border-radius: 8px;
position: absolute;
overflow: hidden;
order: 1;
top: 120%;
}
.faturamento-container::after {
position: absolute;
display: block;
content: "";
bottom: 100%;
right: 25px;
width: 7px;
height: 7px;
margin-bottom: -3px;
border-top: 1px solid #dadada;
border-left: 1px solid #dadada;
background: #fff;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
}
.faturamentoSelected {
width: 100%;
font-size: 1rem;
outline: none;
border: 1px solid #ffb24f;
border-radius: 5px;
padding: 1rem 0.7rem;
font-family: "Poppins";
background: #00416a;
color: #ffb24f;
transition: 0.1s ease-out;
position: relative;
order: 0;
}
.faturamentoSelected::before {
background: none;
border: 1px solid #ffb24f;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
pointer-events: none;
}
.faturamentoSelected::after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 25px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
transition: all 0.4s;
}
.faturamento-container.active {
max-height: 240px;
opacity: 1;
padding: 10px 0;
overflow: visible;
z-index: 999;
}
.faturamento-box .faturamento-container.active+.faturamentoSelected::after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.faturamento-container::-webkit-scrollbar {
width: 8px;
background: #fff;
border-radius: 0 8px 8px 0;
}
.faturamento-container::-webkit-scrollbar-thumb {
background: #dadada;
border-radius: 0 8px 8px 0;
}
.faturamento-box .option-faturamento,
.faturamentoSelected {
padding: 12px 24px;
cursor: pointer;
}
.faturamento-box label {
cursor: pointer;
font-family: "Poppins";
color: orange;
}
.faturamento-box label:hover {
color: orange;
}
.faturamento-box .options-faturamento .radio {
display: none;
}
.options-faturamento {
padding: 12px 24px;
cursor: pointer;
}
/* custom select faturamento */
/*custom select services2 */
.option {
border-radius: 8px;
}
.select-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
}
.select-box .options-container {
padding: 0;
background: #fff;
color: #000;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border: 1px solid #dadada;
border-radius: 8px;
position: absolute;
overflow: hidden;
order: 1;
top: 120%;
}
.select-box .options-container::after {
position: absolute;
display: block;
content: "";
bottom: 100%;
right: 25px;
width: 7px;
height: 7px;
margin-bottom: -3px;
border-top: 1px solid #dadada;
border-left: 1px solid #dadada;
background: #fff;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
}
.selected {
width: 100%;
font-size: 1rem;
outline: none;
border: 1px solid #ffb24f;
border-radius: 5px;
padding: 1rem 0.7rem;
font-family: "Poppins";
background: #00416a;
color: #ffb24f;
transition: 0.1s ease-out;
position: relative;
order: 0;
}
.selected::before {
background: none;
border: 1px solid #ffb24f;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
pointer-events: none;
}
.selected::after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 25px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
padding: 10px 0;
overflow: visible;
z-index: 999;
}
.select-box .options-container.active+.selected::after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #fff;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #dadada;
border-radius: 0 8px 8px 0;
}
.select-box .options-services,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box label {
cursor: pointer;
font-family: "Poppins";
color: orange;
}
.select-box label:hover {
color: orange;
}
.select-box .options-services .radio {
display: none;
}
/* input funcionario*/

<div class="custom_select flex">
<h3 class="textfield_label"> Selecione a categoria da sua Empresa </h3>
<div class="select-box">
<div class="options-container"></div>
<div class="selected">
Selecione um Tipo de Serviço
</div>
</div>
</div>
<div id="faturamento" class="custom_select flex">
<h3 class="textfield_label"> Selecione o faturamento mensal da sua Empresa </h3>
<div class="faturamento-box">
<div class="faturamento-container"></div>
<div class="faturamentoSelected">
Qual o faturamento mensal?
</div>
</div>
</div>