tout le monde. J'ai actuellement un problème avec un casse-glace de 15 pièces que j'essaie de faire. Les critères sont que lorsque je souris sur une pièce dans mon puzzle de diapositive, il est censé régler la frontière sur cette pièce comme rouge, et quand je bouge ma souris. La frontière devrait revenir au noir. Le problème est que les événements de la Mousever et de la Mouseout ne semblent que travailler sur le dernier article passés à travers la boucle de la boucle, et j'ai du mal à travailler une solution.
J'ai essayé de différentes manières, y compris l'écriture de la EventListeners avec d'autres combinaisons de code, mais n'a pas reçu de résultat réussi. Ceci est en fait le plus proche que j'ai obtenu.
Voici le code spécifique en question: et le HTML qui va avec elle (i voudrait noter que ceci est un asignement de classe, de sorte que la modification de ce code HTML n'est donc pas autorisée): et voici une partie du code qui montre comment I. Créer le Puzzle puis mélanger une fois que le bouton shuffle a été enfoncé: et, si nécessaire, un bit des CSS pertinents: J'apprécie toute aide!
3 Réponses :
Vous n'avez pas besoin d'événements JavaScript pour le faire du tout, utilisez simplement un nouveau sélecteur CSS
<div id="puzzlearea">
<!-- the following are the actual fifteen puzzle pieces -->
<div class="state-1">1</div> <div class="state-2">2</div> <div>3</div> <div>4</div>
<div class="state-1">5</div> <div class="state-2">6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
<div>13</div> <div>14</div> <div>15</div>
</div>
C'est génial, et je suis désolé de ne pas la préciser cela, mais la prochaine étape que je vais devoir faire est de changer la couleur de la frontière d'une pièce si une certaine condition est remplie. Y a-t-il un moyen plus simple d'intégrer cela dans cela? Ou parlons-nous de quelque chose de plus en profondeur? Essentiellement, si une pièce peut être déplacée dans la fente vide du puzzle de la diapositive, elle doit alors passer à une bordure rouge sur une survolte.
Vous pouvez ajouter des classes CSS pour les différentes conditions, puis disposer de règles CSS qui remplacent les états intermédiaires précédents. J'ai mis à jour le code dans ma réponse pour le montrer.
Vous pouvez simplement ajouter un sélecteur de survol à votre CSS
border: 5px solid black;
:hover {
border: 5px solid red;
}
Comme d'autres ont mentionné, vous pouvez y parvenir facilement avec CSS. Mais comme il ne s'agit que d'une étape dans un plan d'action plus important, votre fonction devrait fonctionner en modifiant Ceci est parce qu'au moment de l'application de l'auditeur d'événement, la boucle est terminée et les fonctions EventHandler (attachées à chaque élément) ne répondent à code> Item code> comme dernier élément du item.style.borader code> sur e.target.style.border code>. pour boucle code>. p> function movePiece(){
var elements = document.getElementById("puzzlearea").getElementsByTagName('div');
for(var i=0; i<elements.length; i++) {
elements[i].addEventListener('mouseover', function(e){
e.target.style.border = "5px solid red";
},false);
elements[i].addEventListener('mouseout', function(e){
console.log(e.target);
e.target.style.border = "5px solid black";
},false);
}
};
Ce qui ne vient pas d'utiliser CSS: survoler
Sauvez-vous beaucoup de douleur et utilisez CSS:
#puzzlearea> div {frontière: 5px solide noir;} #puzzlearea> div: harvoir {frontière: 5px solide rouge;}Si vous êtes autorisé à ajouter un CSS à votre code que vous ne pouvez Utilisation d'un pseudo-classe nommé : Survol