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- & 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)
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.