Показывать HTML-элементы на основе значения массива

ProgramBox

Показывать HTML-элементы на основе значения массива

Post author:admin
Запись опубликована:12 апреля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

У меня есть ряд флажков, которые могут принимать несколько «проверок». Я хочу, чтобы для каждого установленного флажка отображался div.

Я настроил его так, чтобы фиксировать значение каждого флажка и сохранять его в массиве. Но сейчас я пытаюсь выяснить, как отображать каждый элемент для каждого случая, например, если выбран A, показывать A; если выбраны A и B, показывать A amp; B и т.д.

Я начал делать это как серию операторов if … then, но я чувствую, что это быстро станет громоздким. Затем я подумал об использовании «switch», но не смог заставить это работать. У кого-нибудь есть какие-нибудь мысли?

 function GetSelected() {
  var selected = new Array();
  var tblFruits = document.getElementById("tblFruits");
  var chks = tblFruits.getElementsByTagName("INPUT");
  
  for (var i = 0; i < chks.length; i  ) {
    if (chks[i].checked) {
        selected.push(chks[i].value);
    }
  }
  
  if (selected.includes("1")) {
    document.getElementById("mango").style.display = "block";
    }
  else if (selected.includes("1") amp;amp; selected.includes("2")) {
      document.getElementById("mango").style.display = "block" ;
      document.getElementById("apple").style.display = "block" ;
    }
  else {
    console.log("Oops"); 
  }        
  console.log(selected.includes("2"));
}

 #mango, #apple, #banana, #guava, #orange {
  display: none;
}

 <table id="tblFruits">
  <tr>
    <td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
  </tr>
  <tr>
    <td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
  </tr>
  <tr>
    <td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
  </tr>
  <tr>
    <td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
  </tr>
  <tr>
    <td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
  </tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />

<p>amp;nbsp;</p>

<div class="wrapper">
  <div id="mango">Mango</div>
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
  <div id="guava">Guava</div>
  <div id="orange">Orange</div>
</div>

Ответ №1:

Вы чрезмерно усложняете это. Между флажками и элементами содержимого существует взаимно однозначная связь.

Просто перебирайте флажки и анализируйте их идентификатор, чтобы получить соответствующий идентификатор содержимого, и в рамках этого цикла обновляйте отображение связанного элемента содержимого на каждой итерации.

Или сделайте обратное, просмотрите элементы содержимого и посмотрите, установлен ли соответствующий флажок.

Вы могли бы сделать это еще проще, установив значения в качестве идентификатора содержимого и пропустив строку синтаксического анализа идентификатора флажка. Тогда идентификатор содержимого был бы el.value

 function GetSelected() {

  document.querySelectorAll('#tblFruits input').forEach((el) => {
    const contentId = el.id.replace('chk', '').toLowerCase()
    document.getElementById(contentId).style.display = el.checked ? 'block' : 'none';   
  });

}

 #mango,
#apple,
#banana,
#guava,
#orange {
  display: none;
}

 <table id="tblFruits">
  <tr>
    <td><input id="chkMango" type="checkbox" value="1" /><label for="chkMango">Mango</label></td>
  </tr>
  <tr>
    <td><input id="chkApple" type="checkbox" value="2" /><label for="chkApple">Apple</label></td>
  </tr>
  <tr>
    <td><input id="chkBanana" type="checkbox" value="3" /><label for="chkBanana">Banana</label></td>
  </tr>
  <tr>
    <td><input id="chkGuava" type="checkbox" value="4" /><label for="chkGuava">Guava</label></td>
  </tr>
  <tr>
    <td><input id="chkOrange" type="checkbox" value="5" /><label for="chkOrange">Orange</label></td>
  </tr>
</table>
<br />
<input type="button" value="Get" onclick="GetSelected()" />

<p>amp;nbsp;</p>

<div class="wrapper">
  <div id="mango">Mango</div>
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
  <div id="guava">Guava</div>
  <div id="orange">Orange</div>
</div>

Ответ №2:

В вашем решении выбранный массив содержит весь HTMLElement, а не только значение флажка, но вы обрабатываете массив так, как будто в нем содержится только значение. Это решит вашу проблему 😉

 function clearSelection() {
    const divs = document.querySelectorAll('.wrapper > div');
    [...divs].forEach(div => {
      div.style.display = 'none';
    });
}

function GetSelected() {
clearSelection()
        var tblFruits = document.getElementById("tblFruits");
        var chks = tblFruits.getElementsByTagName("INPUT");
        
        const selected = Array.prototype.filter.call(chks, checkbox => checkbox.checked).map(data => data.id);
        

selected.forEach(id => {
  var resultId = id.slice(3).toLowerCase();

document.getElementById(resultId).style.display = 'block';
})               
        
    }

 #mango, #apple, #banana, #guava, #orange {
        display: none;
    }

 <table id="tblFruits">
    <tr>
        <td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
    </tr>
    <tr>
        <td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
    </tr>
    <tr>
        <td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
    </tr>
    <tr>
        <td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
    </tr>
    <tr>
        <td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
    </tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />

<p>amp;nbsp;</p>

<div class="wrapper">
    <div id="mango">Mango</div>
    <div id="apple">Apple</div>
    <div id="banana">Banana</div>
    <div id="guava">Guava</div>
    <div id="orange">Orange</div>
</div>

Ответ №3:

Я бы рекомендовал избегать ситуаций, в которых вы жестко кодируете несколько условий — это очень плохо масштабируется. Вместо этого я бы нашел способ связать каждый флажок с опцией и просто зациклить результаты. В приведенном ниже примере мы получаем соответствующую текстовую метку и используем ее для поиска соответствующего div по id , чтобы отобразить его:

 function GetSelected() {
    var selected = new Array();
    var tblFruits = document.getElementById("tblFruits");
    var chks = tblFruits.getElementsByTagName("INPUT");

    // clear all previously shown options
    const divs = document.querySelectorAll('.wrapper > div');
    [...divs].forEach(div => {
      div.style.display = 'none';
    });

    for (var i = 0; i < chks.length; i  ) {
        if (chks[i].checked) {
            let value = chks[i].value;
            let text = chks[i].labels[0].textContent.toLowerCase();;
            selected.push(value);
            document.querySelector(`#${text}`).style.display = 'block';
        }
    }
    
    // do anything else you need with the checkbox array
}

 #mango, #apple, #banana, #guava, #orange {
  display: none;
}

 <table id="tblFruits">
    <tr>
        <td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
    </tr>
    <tr>
        <td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
    </tr>
    <tr>
        <td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
    </tr>
    <tr>
        <td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
    </tr>
    <tr>
        <td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
    </tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />

<p>amp;nbsp;</p>

<div class="wrapper">
    <div id="mango">Mango</div>
    <div id="apple">Apple</div>
    <div id="banana">Banana</div>
    <div id="guava">Guava</div>
    <div id="orange">Orange</div>
</div>

Это решение попыталось не трогать / не изменять какую-либо разметку. Это и так супер непрочно — все, что вам нужно, это чтобы в метке был пробел, и она разваливается. Вместо этого рассмотрите возможность использования data- атрибутов для обеспечения более конкретных связей между двумя частями разметки, которые можно использовать для их соединения и внесения изменений по мере необходимости производным способом.

Ответ №4:

Попробуйте вот так

значение флажка и fruits div имеют отношение. Если флажок banana установлен, то будет отображаться div с идентификатором banana , а другой стиль div будет установлен на display:none .

     <table id="tblFruits">
    <tr>
        <td><input id="chkMango" type="checkbox" value="mango"/><label for="chkMango">Mango</label></td>
    </tr>
    <tr>
        <td><input id="chkApple" type="checkbox" value="apple"/><label for="chkApple">Apple</label></td>
    </tr>
    <tr>
        <td><input id="chkBanana" type="checkbox" value="banana"/><label for="chkBanana">Banana</label></td>
    </tr>
    <tr>
        <td><input id="chkGuava" type="checkbox" value="guava"/><label for="chkGuava">Guava</label></td>
    </tr>
    <tr>
        <td><input id="chkOrange" type="checkbox" value="orange"/><label for="chkOrange">Orange</label></td>
    </tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />

<p>amp;nbsp;</p>

<div class="wrapper">
    <div id="mango">Mango</div>
    <div id="apple">Apple</div>
    <div id="banana">Banana</div>
    <div id="guava">Guava</div>
    <div id="orange">Orange</div>
</div>

     function GetSelected() {
        var selected = new Array();
        var tblFruits = document.getElementById("tblFruits");
        var chks = tblFruits.getElementsByTagName("INPUT");
        // this for loop will check checkbox current value and will hide fruits divs
        for (var i = 0; i < chks.length; i  ) {
            if (chks[i].checked) {
                selected.push(chks[i].value); 
                document.getElementById(chks[i].value).style.display = "block";
            } else {
               document.getElementById(chks[i].value).style.display = "none";
            }
        }
        console.log(selected); // All selected fruit stored in this array will diaplyed on console
    }

Вот рабочая демонстрация https://playcode.io/657247 /