PDA

View Full Version : [jQuery] Impostare elemento attivo


kwb
09-08-2013, 18:59
Ciao a tutti!
Ho una struttura html come questa nella mia pagina:

<body>
<div id="Pers1">testo vario</div>
<div id="Pers2">testo vario</div>
<div id="Pers3">testo vario</div>
<div id="Pers4">testo vario</div>
<div id="Pers5">testo vario</div>
</body>

E ho fatto uno script in JS ( principalmente scritto con jQuery ) per spostarmi da un elemento all'altro alla pressione dei tasti J e K ( come succede(va) con Google Reader, 9GAG, e molti altri lettori RSS ).
Lo script funziona, ma ritengo che si possa migliorare, tuttavia non so come eseguire l'implementazione.

La mia implementazione attuale sfrutta tutto un sistema di id personalizzati e indici che trovo macchinosa e non ottimale.

In buona sostanza utilizzo l'evento jQuery keydown sul body:

$('body').keydown(function(e){//Istruzioni});

Per spostarmi da un elemento all'altro. Tuttavia vorrei cambiare il focus e spostarlo dal body sull'elemento corrente, in partenza sul div con id Pers1.
Questo perchè, una volta fatto così, posso scrivere una funzione che al keydown, utilizza solo .prev() e .next() per trovare l'elemento precedente/successivo al quale andare.

Ho provato a cambiare il focus ma senza successo. Ho tentato un:

document.activeElement = $('div#Pers1');

e anche

$('div#Pers1').focus();
Ma senza successo. Il focus rimane sempre sul body.

Soluzioni?

OoZic
09-08-2013, 19:59
non so se è quello che devi fare ma la prima cosa che mi è venuta in mente è:
js:

$(document).keypress(function(e){
// vai avanti
if(e.which == 107) {
var a1 = $(".active");
var s1 = $(".active").next();
a1.removeClass("active");
s1.addClass("active");
}
// torna indietro
else if (e.which == 106) {
var a2 = $(".active");
var s2 = $(".active").prev();
a2.removeClass("active");
s2.addClass("active");
}
});

css:
.active {
color:#E01B5D;
}
html:
<div class="pippo active" id="Pers1">testo vario</div>
<div class="pippo" id="Pers2">testo vario</div>
<div class="pippo" id="Pers3">testo vario</div>
<div class="pippo" id="Pers4">testo vario</div>
<div class="pippo" id="Pers5">testo vario</div>



http://jsfiddle.net/EycWW/

non premere subito J perchè si blocca :) dovresti fare una condizione se è il primo o l'ultimo elemento per evitarlo.

kwb
13-08-2013, 21:17
Perfetto grazie! :)