Grouping vars in function - part 2

Question

I asked a question yesterday about grouping vars and I got an answer but it only solves half my issue:

I would like to be able to group vars in javascript so I can select a group of div's to show and a group to hide. From previous question I now have:

var elemsById = ['myDIVA','myDIVB','myDIVC'].map(id=>[id,document.getElementById(id)]);
    
function showThisAndHideRest(showId){
  elemsById.forEach(function([id,el]){
    el.style.display=id===showId?'block':'none';
  });
}

<div id="myDIVA" style="display:none;">blabla 1</div>
<div id="myDIVB" style="display:none;">blabla 2</div>
<div id="myDIVC" style="display:none;">blabla 3</div>
<div onClick="showThisAndHideRest('myDIVB');">Show NEW VERSION</div>

And this works for showing one div and hiding all others. But I cannot make it work to selecting a group of divs to show. This is where I hope some friendly experts can pave the way :-) Thanks for looking. Note: I have a lot of div's (40+ and growing) containing text and css-style - and I would like to group them to show in various combinations on page without reloading the page. Cross-browser-compatibility including slightly older IE's would be preferable :-)

@PeterMader Thank you for cleaning up my question. I would like to be able to show myDIVA and myDIVB and hiding myDIVC. But for my "real" project I would like to be able to add funcion saying; show only (eg.) div's A,E,F,M,P and hide the rest of 40+ — morganF, Jul 30 '17 at 14:35

score 1 · Accepted Answer · answered Jul 30 '17 at 14:34

Assuming showId is an array

function showThisAndHideRest(showId){
  elemsById.forEach(function([id,el]){
    el.style.display=showId.includes(id)?'block':'none';
  });
}

Array.includes returns true if the id is in the array.

You should now be able to do

showThisAndHideRest(["elem1","elem2"])

score 1 · Answer 2 · answered Jul 30 '17 at 14:52

If you don't mind refactoring your code a bit:

// find all elements with the class 'list-item'
// and convert the result to an array 
const divs = [...document.querySelectorAll('.list-item')];

function showIndices (indices) {
  // loop over the <div>s
  divs.forEach((div, index) => {
    // if the array contains the <div>'s index 
    if (indices.indexOf(index) !== -1) {
      // make the <div> visible
      div.classList.add('visible');
    } else {
      // hide the <div>
      div.classList.remove('visible');
    }
  });
}

const select = document.querySelector('select'); // the <select> element
select.addEventListener('change', function () {
  // this function is executed whenever the value of the <select> element changes
  if (this.selectedIndex === 0) {
    // the user selected the first <option>
    showIndices([0, 4, 5]); // show A, E, F
  } else if (this.selectedIndex === 1) {
    // the user selected the second <option>
    showIndices([1, 2, 3, 8]); // show B, C, D, I
  } 
});

.list-item {
  display: none;
}

.list-item.visible {
  display: block;
}

<div class="list-item">A</div>
<div class="list-item">B</div>
<div class="list-item">C</div>
<div class="list-item">D</div>
<div class="list-item">E</div>
<div class="list-item">F</div>
<div class="list-item">G</div>
<div class="list-item">H</div>
<div class="list-item">I</div>

<!-- ... -->

Select what divs to show:

<select>
  <option>A, E, F</option>
  <option>B, C, D, I</option>
</select>

Of course, you don't need to use the <select> element. Just call showIndices(...) with an array of the indices you want to be visible.

I can see how this is clever but for the moment I am very glad with the solution I got from @Daniel Vestøl. Before this I had grouping functions with a line for every div that needed to be block'ed or hidden and it grew completely out of proportion. Now I can make the groups needed without changing anything in my html - and that was exactly what aimed for. If I ever rebuild completely I'll look at your solution again. Thanks :-) — morganF, Jul 30 '17 at 14:58
That will probably happen by the time you get tired of having to write `myDIVA`, `myDIVB`, `myDIVC`, ... `myDIVZ` as the ID :) — PeterMader, Jul 30 '17 at 15:00

Grouping vars in function - part 2

2 Answers2