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

Question

我确实有很长的链接列表，其中包含多个类和用于显示和隐藏它们的复选按钮。这些课程分为两类：职业和国家。我的解决方案是首先仅使用职业构建的，这很容易：获取课程并显示/隐藏它。但这随着第二维度（国家）而改变。

现在，一些未显示的链接会再次出现，例如取消选中美国，但是如果再次检查职业，即使没有显示该国家，也会再次显示该国家。

检查链接是否尚未显示并且不让链接再次出现的最佳解决方案是什么？ 编辑：好的，我现在知道我确实需要一个新链接因为我的代码在多个方面都远远不够简单。如果我的问题有一个小的插件解决方案，我也将使用它！

为了最终更好地理解jsfiddle：Array

谢谢！

我的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>

我的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';
        }
    };

和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)
}