Ce code présente une grille de cellules colorées qui changent de couleur sur le centre de la souris, laissant une trace de cellules de la nouvelle couleur. Un bouton recharge la grille avec des cellules de la couleur d'origine. Le problème est que le changement de couleur du centre de la souris ne fonctionne qu'après le premier chargement de la grille (actualisation de la page) mais pas lors des chargements suivants après avoir cliqué sur le bouton Créer une nouvelle grille.

Je suis nouveau sur javascript et jQuery et même si j'ai parcouru les documents de classe et lu quelques articles sur la façon de faire diverses parties de cela, je ne vois pas ce qui ne va pas.

Visitez le jsfiddle ici.

var gridWidth = 600;
var fillGrid = function(){
    $('.grid').empty();
  var cellsPer = prompt('How many cells would you like in a side?');
  console.log('cellsPer = ' + cellsPer);
  var cellWidth = (gridWidth / cellsPer) - 1;
    console.log('cellSize = ' + cellWidth);

  var cell = "<div class='cell'></div>";
  for (var i = 0; i < cellsPer**2; i++) {
    $('.grid').append(cell);
  };
  $('.cell').css({
    'background':'blue','height': cellWidth+'px',  'width': cellWidth+'px',
    'float':'left','margin': '0 1px 1px 0'
  });
};

$(document).ready(function() {
  fillGrid();

  $('.grid').css({'width': gridWidth+'px'});

  $('button').click(function(){
        fillGrid();
    });

  $('.cell').mouseenter(function() {
    $(this).css('background','pink');
  });
});
0
tmorgan 9 août 2016 à 06:54

3 réponses

Meilleure réponse

Déplacez-le en dehors de la fonction $(document).ready et ajoutez la fonctionnalité de saisie de la souris comme

' $(document).on('mouseenter','.cell',function() {
   $(this).css('background','pink');
  });' 
0
user1371896 9 août 2016 à 08:32

Deux problèmes que je remarque avec ce code
1) cellsPer ** 2 n'est pas valide. Utilisez Math.pow ou cellsPer * cellsPer
2) Vous configurez uniquement l'écouteur de saisie de la souris sur document.ready. L'appel de empty sur votre grille supprimera tous les éléments enfants - les écouteurs d'événements attachés et tous. Cela signifie que vous devrez rajouter les écouteurs d'événements chaque fois que vous réinitialisez la grille.

Voici un extrait mis à jour avec des modifications minimales pour faire fonctionner votre code:

var gridWidth = 600;
var fillGrid = function(){
  $('.grid').empty();
  var cellsPer = prompt('How many cells would you like in a side?');
  console.log('cellsPer = ' + cellsPer);
  var cellWidth = (gridWidth / cellsPer) - 1;
  console.log('cellSize = ' + cellWidth);

  var cell = "<div class='cell'></div>";
  for (var i = 0; i < cellsPer * cellsPer; i++) {
    $('.grid').append(cell);
  };
  $('.cell').css({
  	'background':'blue','height': cellWidth+'px',  'width': cellWidth+'px',
    'float':'left','margin': '0 1px 1px 0'
  });
};

$(document).ready(function() {
  fillGrid();

  $('.grid').css({'width': gridWidth+'px'});

  $('button').click(function(){
    fillGrid();
    $('.cell').mouseenter(function() {
      $(this).css('background','pink');
    });
  });
  
  $('.cell').mouseenter(function() {  
    $(this).css('background','pink');
  });
});
button{
  display:block;
  margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Create New Grid</button>
<div class="grid"></div>

Puisque vous faites cela pour une classe, je ne vais pas refactoriser le code mais, une autre suggestion que je ferais est d'ajouter l'écouteur d'événements dans la fonction fillGrid, de cette façon vous encapsulez soigneusement tout ce qui a à faire avec la grille en un seul endroit.

0
Damon 9 août 2016 à 04:14

Vous n'avez ajouté l'écouteur d'événements mouseenter qu'une seule fois sur $(document).ready. Lorsque fillGrid() est appelé, un nouvel ensemble d'éléments '.cell' non liés à l'événement mouseenter est ajouté au DOM.

Vous devez leur dire de se comporter de nouveau.

Voir les extraits suivants:

var gridWidth = 600;
var fillGrid = function(){
	$('.grid').empty();
  var cellsPer = prompt('How many cells would you like in a side?');
  console.log('cellsPer = ' + cellsPer);
  var cellWidth = (gridWidth / cellsPer) - 1;
	console.log('cellSize = ' + cellWidth);

  var cell = "<div class='cell'></div>";
  for (var i = 0; i < cellsPer**2; i++) {
    $('.grid').append(cell);
  };
  $('.cell').css({
  	'background':'blue','height': cellWidth+'px',  'width': cellWidth+'px',
    'float':'left','margin': '0 1px 1px 0'
  });
  
  $('.cell').mouseenter(function() {
  	$(this).css('background','pink');
  });
};

$(document).ready(function() {
	fillGrid();

	$('.grid').css({'width': gridWidth+'px'});

  $('button').click(function(){
		fillGrid();
	});
});
button{
  display:block;
  margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Create New Grid</button>
  <div class="grid"></div>
3
Rilke Petrosky 9 août 2016 à 04:51