problema prototipo javascript
-
18-09-2019 - |
Domanda
Così ho un problema di javascript, piuttosto di base che sono stato sbattendo la testa contro un muro sopra per un po ':
<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>
In sostanza, ho bisogno di creare una spazzatrice che imposta il div a display: none se tutto il Li sono visualizzazione:. None
Credo che sarebbe iniziare come:
function sweep(){
$$('div.alist').each( function( s ) {
ar = s.down().children
});
}
Qualche suggerimento per buoni tutorial sarebbe il benvenuto così
Soluzione
Una cosa del genere potrebbe iniziare. Avrai bisogno di scorrere i bambini e verificare se sono visibili. Se qualcuno di loro non sono, impostare un flag e rompere il ciclo. Se il flag è falso, allora non c'è bisogno di nascondere il 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();
}
});
}
Altri suggerimenti
È possibile utilizzare il href="http://api.prototypejs.org/dom/element.html#select-class_method" selezionare () il metodo di Element
a trovare tutti i discendenti li
. Ed eseguire un metodo di Array.all per ogni li
e verificare se tutto return true. Nascondere il div se restituiscono tutte vero.
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();
}
});
}
Questo codice è testato.
Questa è la soluzione di jQuery (Prototype deve essere qualcosa di simile):
$('div.alist').css('display', function () {
return $(this).find('li:visible').length < 1 ? 'none' : '';
});