J'ai une pile de Quel est le moyen le plus simple de le faire? frères et sœurs et je veux laisser l'utilisateur utiliser les flèches haut et bas pour monter et descendre la liste et "mettre en surbrillance" un élément. Un seul élément doit être mis en évidence à un moment donné.
3 commentaires
4 Réponses :
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");
}
});
Si l'OP parle de l'utilisation de la flèche Keys , ils doivent ensuite se lier à l'événement Keyup et vérifier l'événement. Qu'est-ce que vous pourrez savoir quelle clé a été enfoncée.
J'ai fait cela up suiv haut: http://jsfiddle.net/jpy76/ .
Ça fondamentalement Supprime une classe en surbrillance lors de la mise en marche et de l'ajouter au prochain / précédent. Un certain code supplémentaire est nécessaire pour descendre après la dernière / mise après le premier.
$(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')
}
}
})
Check working example at http://jsfiddle.net/wMdML/8/
Wow, bien fait. Je ne peux pas croire combien de temps certaines des réponses sont ici.
Ne peut pas obtenir ce travail sur chrome en fait. En outre, qu'en est-il de traverser le premier article après la dernière?
Chrome n'a pas l'air de fonctionner bien avec la clé de clé. Il suffit de changer KeyPress au Keyup. $ (document) .Keyup (fonction (e) { J'ai mis à jour la réponse.
Merci, mais toujours, après que la dernière est sélectionnée, il est possible que cela ne puisse pas être retenu.
Voici une façon de le faire sans utiliser des identifiants ou des classes. Un exemple de jsfiddle de travail est disponible ici (assurez-vous de cliquer sur le volet de résultats en premier).
Le JavaScript: P>
<div id="myContainer">
<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>
<div> Div 4 </div>
</div>
Et qu'est-ce que votre HTML ressemblerait? La source de vue HTML, pas une description de celui-ci. Et qu'est-ce que vous avez déjà essayé et qu'est-ce qui a mal tourné?
@David La question est très claire sans la nécessité de fournir une source HTML.
@Hussein: Et la partie sur ce qu'il a déjà essayé et ce qui a mal tourné ..? Son HTML est impliqué, ce n'est pas spécifié. Et bien que la description soit relativement claire, ce n'est pas exactement reproductible sans une hypothèse.