JavaScript -Prototyp -Problem
-
18-09-2019 - |
Frage
Ich habe also ein ziemlich grundlegendes JavaScript -Problem, über das ich seit einiger Zeit meinen Kopf in eine Wand geknallt habe:
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<script>
function toggle_item( num ){
$$( 'li.group_' + num ).invoke('toggle');
}
</script>
Grundsätzlich muss ich eine Kehrmaschine erstellen, die die DIV auf die Anzeige setzt: Keine, wenn alle LI angezeigt werden: keine.
Ich denke, es würde anfangen wie:
function sweep(){
$$('div.alist').each( function( s ) {
ar = s.down().children
});
}
Alle Vorschläge für gute Tutorials wären ebenfalls willkommen
Lösung
So etwas könnte Ihnen den Einstieg bringen. Sie müssen durch die Kinder iterieren und prüfen, ob sie sichtbar sind. Wenn einer von ihnen nicht von ihnen ist, stellen Sie eine Flagge und brechen Sie von der Schleife ab. Wenn die Flagge falsch ist, müssen Sie die nicht verbergen div
.
function sweep(){
$$('div.alist').each( function( s ) {
var shouldHide = true;
var children = s.down().childElements();
children.each(function(li) {
if(li.visible()) {
shouldHide = false;
throw $break;
}
});
if(shouldHide) {
s.hide();
}
});
}
Andere Tipps
Sie könnten die verwenden auswählen() Methode von Element
Alle finden li
Nachkommenschaft. Und führen Sie eine Methode aus Array.All für jeden li
und prüfen Sie, ob alle true zurückkehren. Verstecke die DIV, wenn alle wahr zurückkehren.
function sweep() {
// check each div
$$('div.alist').each(function(element) {
var listItems = element.select('li');
// are the list items of this div hidden?
var listItemsHidden = listItems.all(function(item) {
return item.visible();
});
// hide the div too if so
if(listIemsHidden) {
element.hide();
}
});
}
Dieser Code ist ungetestet.
Dies ist JQuery -Lösung (Prototyp muss etwas Ähnliches sein):
$('div.alist').css('display', function () {
return $(this).find('li:visible').length < 1 ? 'none' : '';
});