javascript итераций для изменения внутреннего. html элементов - PullRequest
Новая
       4

javascript итераций для изменения внутреннего. html элементов

0 голосов
/ 14 июля 2020

У меня проблема с обработкой событий DOM в моем коде javascript:

1. Первое поле: Для выбора типа

2. Второе поле: Согласно выбранному типу (id) первого поля, второе поле показывает значения.

Итак, в зависимости от выбранного типа (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;
        });
      });
    }
  });
}

, но у меня проблема с выполнением этих итераций, мне нужно, чтобы каждое поле было изменено внутренним. html / значение по billing.name и faturamento.id

и если нечего итерировать, удаляются элементы, несовместимые с итерацией фатураменто 

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>

1 Ответ

1 голос
/ 14 июля 2020

Я переработал ваш код в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...