- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- [Jquery] Ripetere funzione con elementi diversi
-
Questo è un esempio funzionante con il mio codice h t t p ://gd83.altervista.org/example/
giusto per dare un'idea di quello che voglio realizzare.
-
Ma tu hai chiesto come fare per evitare di ripetere due volte lo stesso codice, non come fare per aumentare l'altezza di un div se viene cliccato. Spiega bene cosa vuoi fare e poi vediamo come farlo. Per aumentare l'altezza di un div, l'oggetto window non ti serve.
-
@Francesco Di Caprio said:
Ma tu hai chiesto come fare per evitare di ripetere due volte lo stesso codice, non come fare per aumentare l'altezza di un div se viene cliccato. Spiega bene cosa vuoi fare e poi vediamo come farlo. Per aumentare l'altezza di un div, l'oggetto window non ti serve.
Ciao Francesco, si quello che volevo é proprio quello di riscrivere quella parte di codice senza ripeterla.
In teoria a me non serve aumentare l'altezza del div, ma di aggiungere la classe 'selected' all'attributo href quando l'elemento 'li' supera i 30px di altezza.
Il menù cliccabile che cambia l'altezza è fittizio, non c'entra con quello che devo realizzare è solo una simulazione per mostrare il funzionamento del codice da me postato.
-
Con questo esempio qui forse è più chiaro, in effetti mi sono spiegato proprio male
Però quello che vorrei migliorare è solo il codice da me postato inizialmente,
il resto non è da calcolare sia perché è solo una simulazione del codice reale e sia perché non ho la possibilità di modificare il sorgente orginale
il sorgente html e js, ma solo il mio blocco di codice.Il tutto funziona correttamente, infatti quando la lista supera i 25px si aggiunge la classe 'Selected' all'attributo href.
ecco l'esempio :
h t t p : / / gd83.altervista.org/example2/
-
Sono riuscito a realizzare lo script con l'aiuto di Francesco (grazie!),
come potrei semplificare ancora il codice agendo direttamente sull'elemento li
senza specificare l'id?grazie!
[HTML]
function resizeFrame() {
var frames = []; for (var i = 149, l = 1000; i < l; i++) {
frames.push(i);}
$.each(frames, function() {
var divHeight = $('li#' + this).outerHeight();if (divHeight > 30) {
$('li#' + this + ' > a').addClass('Selected');
} else {
$('li#' + this + ' > a').removeClass('Selected');
}
});
}
setInterval(resizeFrame, 150);<ul id="tree">
<li id ="150"> <a href="#">nameA</a>
<ul><li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li id ="250"> <a href="#">nameB</a>
<ul> <li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li><li id ="980"> <a href="#">nameC</a>
<ul><li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>[/HTML]
-
Usando come selettore il tag, piuttosto che un id, agisci su tutti i tag. Con $("ul#tree li"), agisci su tutti i LI che sono figli dell'UL con ID "tree".
-
@Francesco Di Caprio said:
Usando come selettore il tag, piuttosto che un id, agisci su tutti i tag. Con $("ul#tree li"), agisci su tutti i LI che sono figli dell'UL con ID "tree".
Ho provato a modificare il codice in questo modo ma non funziona
[HTML]
$("#tree li").each(function() {
var divHeight = $('li').outerHeight();
if (divHeight > 30) {
$('li > a').addClass('Selected');
} else {
$('li > a').removeClass('Selected');
}
});
}
setInterval(resizeFrame, 150);[/HTML]
-
Cosa devi modificare, i li che sono sotto #tree, oppure i li che sono sotto l'ul che sta sotto?
-
@Francesco Di Caprio said:
Cosa devi modificare, i li che sono sotto #tree, oppure i li che sono sotto l'ul che sta sotto?
I tag li che sono sotto che stanno sotto l'ul tree, cioè quelli che nel codice html hanno l'id.
-
Ho modificato il codice in questo modo, ma applica la classe 'Selected' a tutti i tag a
[HTML]
function resizeFrame() {$("ul#tree li").each(function() { var divHeight = $('ul#tree li').outerHeight(); if (divHeight > 30) { $('ul#tree li > a').addClass('Selected'); } else { $('ul#tree li > a').removeClass('Selected'); } });
}
setInterval(resizeFrame, 50);[/HTML]