显示/隐藏列表元素有多种可能性

Question

I do have a long list of links with multiple classes and checkbuttons to show and hide them. The classes are based in two categories: occupation and countries. My solutions was build first with occupation only, which is easy: get the class and show/hide it. But that changed with the second dimension, the countries.

Now some links which are not displayed come back again, like uncheck america, but if a occupation is checked back again, the country is displayed again, even if the country is not.

What would be the best solution to check if a link is already not displayed and to not let it come back again? Edit: ok, I understand now that I do need a new approach since my code is far to simple for more than one dimension. If there is a small plugin-solution for my problem I would also use it!

For eventual better comprehension a jsfiddle: http://jsfiddle.net/tcsf76b4/2/

Thanks in advance!

My html:

<div class="modal-content">

        <div class="buttons-list">
            <label class="checkcontainer">Sozial
                <input name="social" id="socialButton" type="checkbox" checked="checked" value="includeSocial">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Sport
                <input name="animal" id="sportButton" type="checkbox" checked="checked" value="includeSport">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Tier- &amp; Umweltschutz
                <input name="animal" id="animalButton" type="checkbox" checked="checked" value="includeAnimal">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Medizin
                <input name="medical" id="medicalButton" type="checkbox" checked="checked" value="includeMed">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Schule/KiTa
                <input name="child" id="childButton" type="checkbox" checked="checked" value="includeChild">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Specials
                <input name="special" id="specialButton" type="checkbox" checked="checked" value="includeSpecial">
                <span class="checkmark"></span>
            </label>

            <hr>

            <label class="checkcontainer">Afrika
                <input name="africa" id="africaButton" type="checkbox" checked="checked" value="includeAfrica">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Amerika
                <input name="america" id="americaButton" type="checkbox" checked="checked" value="includeAmerica">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Asien
                <input name="asia" id="asiaButton" type="checkbox" checked="checked" value="includeAsia">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Europa
                <input name="europe" id="europeButton" type="checkbox" checked="checked" value="includeEurope">
                <span class="checkmark"></span>
            </label>

            <label class="checkcontainer">Ozeanien
                <input name="oceania" id="oceaniaButton" type="checkbox" checked="checked" value="includeOceania">
                <span class="checkmark"></span>
            </label>
        </div>

        <ul class="projektliste_wrap">


                            <li class="social albanien europe projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Albanien/albanien-einrichtung-fuer-menschen-mit-behinderung" target="_blank">
                        Albanien - Einrichtung für Kinder und junge Erwachsene mit Behinderung                    </a>
                </li>
                            <li class="social europe albanien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Albanien/albanien-nurserycare" target="_blank">
                        Albanien - Krankenhaus in Tirana (Nursery Care)                    </a>
                </li>
                            <li class="social europe albanien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Albanien/albanien-roma-center" target="_blank">
                        Albanien - Community Center für Roma-Kinder in Tirana                    </a>
                </li>
                            <li class="animal europe albanien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Albanien/albanien-tierheim" target="_blank">
                        Albanien - Tierheim in der Nähe von Tirana                    </a>
                </li>


                            <li class="special america argentinien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien/cordoba-praktikum" target="_blank">
                        Argentinien - Praktika (Beispiele)                    </a>
                </li>
                            <li class="social america argentinien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien/cordoba-projektliste" target="_blank">
                        Argentinien - Unterrichten an einer Sprachschule                    </a>
                </li>
                            <li class="animal america argentinien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien/cordoba-reittherapie" target="_blank">
                        Argentinien - Reittherapie mit Kindern nahe Córdoba                    </a>
                </li>
                            <li class="social america argentinien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien/cordoba-sozialarbeit" target="_blank">
                        Argentinien - Soziarbeit mit Kindern in Córdoba und Umgebung                    </a>
                </li>
                            <li class="sport america argentinien projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien/cordoba-sportprojekte" target="_blank">
                        Argentinien - Sportprojekte in Córdoba und Umgebung                    </a>
                </li>
                            <li class=" projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien-buenos-aires/Galerie" target="_blank">
                                            </a>
                </li>
                            <li class=" projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien-buenos-aires/buenosaires-projektliste" target="_blank">
                                            </a>
                </li>
                            <li class=" projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien-buenos-aires/buenosaires-projektliste_gemeinde" target="_blank">
                                            </a>
                </li>
                            <li class=" projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien-buenos-aires/buenosaires-projektliste_gesundheit" target="_blank">
                                            </a>
                </li>
                            <li class=" projektliste">
                    <a href="https://auszeitstaging.azurewebsites.net/Freiwilligenarbeit/Argentinien-buenos-aires/buenosaires-projektliste_kinder" target="_blank">
                                            </a>
                </li>
    </div>

My js:

var lis = document.getElementsByTagName('li');

    var socialToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('social'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('socialButton').onclick = socialToggle;

    var sportToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('sport'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('sportButton').onclick = sportToggle;

    var animalToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('animal'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('animalButton').onclick = animalToggle;

    var medicalToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('medical'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('medicalButton').onclick = medicalToggle;

    var specialToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('special'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('specialButton').onclick = specialToggle;

    //Länderfilter

    var africaToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('africa'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('africaButton').onclick = africaToggle;

    var americaToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('america'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('americaButton').onclick = americaToggle;

    var asiaToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('asia'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('asiaButton').onclick = asiaToggle;

    var europeToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('europe'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('europeButton').onclick = europeToggle;

    var oceaniaToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('oceania'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };
    document.getElementById('oceaniaButton').onclick = oceaniaToggle;

    var elseToggle = function () {
        for (var i = 0, l = lis.length; i < l; i++) {
            if (lis[i].classList.contains('none'))
                if (lis[i].style.display === 'none') lis[i].style.display = '';
                else lis[i].style.display = 'none';
        }
    };

and the css:

/* Customize the label (the container) */
.buttons-list {
    padding: 0 0 1rem;
}

.checkcontainer {
    display: inline-block;
    position: relative;
    padding-left: 1.5rem;
    margin: 0 1.1rem .5rem 0;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #00a4e9;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #00a4e9;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

Answer 1

I think you can do that by using datasets. Every time you check for a list item being hidden you can also check for the dataset values and update them.

Something like this:

// check for dataset.country and update dataset.occupation 
var socialToggle = function () {
  for (var i = 0, l = lis.length; i < l; i++) {
    if (lis[i].classList.contains('social')) {
      if (lis[i].style.display === 'none' && lis[i].dataset.country !== 'closed') {
        lis[i].style.display = '';
        lis[i].dataset.occupation = 'opened';
      } else {
        lis[i].style.display = 'none';
        lis[i].dataset.occupation = 'closed';
     }
   }
};

// check for dataset.occupation and update dataset.country
var americaToggle = function () {
  for (var i = 0, l = lis.length; i < l; i++) {
    if (lis[i].classList.contains('america')) {
      if (lis[i].style.display === 'none' && lis[i].dataset.occupation !== 'closed'){
        lis[i].style.display = '';
        lis[i].dataset.country = 'opened';
      } else {
        lis[i].style.display = 'none';
        lis[i].dataset.country = 'closed';
      }
    }
  }
};

EDIT : working example here