LOG4420: Question 5 de l'intra 2013

Lors de la séance de révision, nous avons discuté de la solution pour la question 5 de l'intra 2012. Une solution que nous avons trouvée est la suivante (en jQuery):

$(document).ready(function(){
     $('.boite').click(function(){
          $(this).append($('.boite img'));
          });
      });

Nous utilisons le CSS suivant:

.boite {
  vertical-align: top;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: solid 1px;
}
img {
width: 150px;
height: 150px;
}

Nous aurions pu aussi nous limiter à l'API du DOM:

window.onload = function init(){
    var boites = document.getElementsByClassName('boite');
    for (b = 0; b < boites.length; b++){
	boites[b].onclick = function(){
	    this.appendChild(document.querySelector('img'));
	  };
    }
}

Maintenant, si on veut que le fond de la boîte soit rouge lorsqu'on y déplace l'image, il faut éviter de contaminer le code Javascript avec le CSS en écrivant quelque chose comme ceci:

$(document).ready(function(){
     $('.boite').css('background-color','transparent');
     $('.boite').click(function(){
          $(this).append($('.boite img'));
          $(this).css('background-color','red');
          });
      });

Il faut plutôt utiliser une classe, qui pourra être ajoutée ou retirée par le code Javascript:

.boite {
    vertical-align: top;
    text-align: center;
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    border: solid 1px;
}
img {
    width: 150px;
    height: 150px;
}
.eclatant {
    background-color: red;
}


$(document).ready(function(){
     $('.boite').click(function(){
         $('.boite').removeClass('eclatant');
         $(this).append($('.boite img'));
         $(this).addClass('eclatant');
        });
    });