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

Question

我有一个很长的链接列表，其中包含多个类和检查按钮以显示和隐藏它们。这些课程分为两类：职业和国家。我的解决方案首先只用职业来构建，这很简单：获取课程并显示/隐藏它。但是，随着第二个方面，各国也发生了变化。

现在一些未显示的链接会再次返回，例如取消选中美国，但如果再次检查占用，则会再次显示该国家/地区，即使该国家/地区不是。

检查链接是否已经显示并且不让它再次返回的最佳解决方案是什么？编辑：好的，我现在明白我确实需要一种新的方法，因为我的代码对于多个维度来说很简单。如果我的问题有一个小的插件解决方案，我也会用它！

为了最终更好地理解一个jsfiddle：http://jsfiddle.net/tcsf76b4/2/

提前致谢！

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

Answer 1

我认为你可以通过使用数据集来做到这一点。每次检查隐藏的列表项时，您还可以检查数据集值并更新它们。

像这样的东西：

// 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';
      }
    }
  }
};

编辑：工作示例here