Come si fa a fare su e giù le frecce elementi di un elenco di evidenziare? (JQuery)
-
24-10-2019 - |
Domanda
ho una pila di fratelli <DIV>
e voglio permettere all'utente di utilizzare la frecce su e giù per spostarsi su e giù per la lista e "evidenziare" un elemento. Solo una voce deve essere evidenziato in un dato momento.
Qual è il modo più semplice per farlo?
Soluzione
$(document).keyup(function(e) {
var $hlight = $('div.hlight'), $div = $('div');
if (e.keyCode == 40) {
$hlight.removeClass('hlight').next().addClass('hlight');
if ($hlight.next().length == 0) {
$div.eq(0).addClass('hlight')
}
} else if (e.keyCode === 38) {
$hlight.removeClass('hlight').prev().addClass('hlight');
if ($hlight.prev().length == 0) {
$div.eq(-1).addClass('hlight')
}
}
})
Controlla esempio lavorando a http://jsfiddle.net/wMdML/8/
Altri suggerimenti
OK ...
var highlight = function(upOrDown){
var highlighted = $("#daddyDiv > div.higlighted");
if(highlighted[0] == null){
//If nothing is highlighted, highlight the first child
$("#daddyDiv > div:first").addClass("highlighted");
} else {
//Highlight the next thing
if(upOrDown == "down" && highlighted.index() != $("#daddyDiv > div").length()){
$("#daddyDiv > div").eq(highlighted.index()+1).addClass("highlighted");
$("#daddyDiv > div.higlighted").removeClass("highlighted");
} else if(upOrDown == "up" && highlighted.index() != 1){
$("#daddyDiv > div").eq(highlighted.index()-1).addClass("highlighted");
$("#daddyDiv > div.higlighted").removeClass("highlighted");
}
}
};
//Assuming you are using up/down buttons...
$("#upButton").click(function(){ highlight("up"); });
$("#downButton").click(function(){ highlight("down"); });
//Using the arrow keys...
$("body").keyup(function(e){
if(e.keyCode == "40"){
//Down key
highlight("down");
} else if(e.keyCode == "38"){
//Up key
highlight("down");
}
});
Ho fatto questo in su:. http://jsfiddle.net/JPy76/
Si rimuove fondamentalmente una classe evidenziata quando si sposta su / giù e lo aggiunge alla successiva / precedente. Alcuni codice aggiuntivo è necessario per lo spostamento verso il basso dopo l'ultimo / risalendo dopo il primo.
$('body').keydown(function(e) {
if(e.keyCode === 40) {
if($('.highlighted').next().length) {
$('.highlighted').removeClass('highlighted')
.next().addClass('highlighted');
}
else {
$('.highlighted').removeClass('highlighted');
var d = $('div');
d.length = 1;
d.addClass('highlighted');
}
}
if(e.keyCode === 38) {
if($('.highlighted').prev().length) {
$('.highlighted').removeClass('highlighted')
.prev().addClass('highlighted');
}
else {
$('.highlighted').removeClass('highlighted');
var d = $('div');
d = $(d[d.length - 1]);
d.addClass('highlighted');
}
}
});
Ecco un modo per farlo senza usare gli ID o classi. Un esempio jsfiddle di lavoro è disponibile qui (assicuratevi di cliccare sul riquadro Risultato prima).
Il javascript:
var $currentDiv = $("#myContainer").children().first();
$currentDiv.css("background", "red");
$("html").keyup( function(keyEvent) {
if (keyEvent.keyCode == 40 ) {
var $nextDiv;
if ($currentDiv.next().size() == 0) {
$nextDiv = $("#myContainer").children().first();
}
else {
$nextDiv = $currentDiv.next();
}
$currentDiv.css("background", "");
$nextDiv.css("background", "red");
console.log($nextDiv);
console.log($currentDiv);
$currentDiv = $nextDiv;
}
else if (keyEvent.keyCode == 38) {
var $previousDiv;
if ($currentDiv.prev().size() == 0)
$previousDiv = $("#myContainer").children().last();
else {
$previousDiv = $currentDiv.prev();
}
$currentDiv.css("background", "");
$previousDiv.css("background", "red");
$currentDiv = $previousDiv;
}
});
Il codice HTML:
<div id="myContainer">
<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>
<div> Div 4 </div>
</div>