[英]Show/hide list elements with multiple possibilities
我確實有很長的鏈接列表,其中包含多個類和用於顯示和隱藏它們的復選按鈕。 這些課程分為兩類:職業和國家。 我的解決方案是首先僅使用職業構建的,這很容易:獲取課程並顯示/隱藏它。 但這隨着第二維度(國家)而改變。
現在,一些未顯示的鏈接會再次出現,例如取消選中美國,但是如果再次檢查職業,即使沒有顯示該國家,也會再次顯示該國家。
檢查鏈接是否尚未顯示並且不讓它再次出現的最佳解決方案是什么? 編輯:好的,我現在知道我確實需要一種新方法,因為我的代碼在多個維度上都非常簡單。 如果我的問題有一個小的插件解決方案,我也將使用它!
為了最終更好地理解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- & 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)
}
我認為您可以通過使用數據集來做到這一點。 每次您檢查隱藏的列表項時,您還可以檢查數據集值並更新它們。
像這樣:
// 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';
}
}
}
};
編輯 : 這里的工作示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.