11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je m'explique, j'ai plusieurs images, avec au 'mouseover', l'affichage d'un contenu et une description à droite. Maintenant, je dois en sélectionner au click, 8 (de 0 à 7), et je suis entrain de chercher un plugin jquery. Si quelqu'un a une idée c'est très urgent!!!!

Merci d'avance!!!

rader
Modifié par dew (22 Mar 2012 - 16:10)
Merci pour la réponse, je m'explique:
J'ai plusieurs images et au mouseover, j'affiche le produit (je veux dire une image et sa description), ensuite au click, je dois sélectionner sur les 12 images, que 8 (le code est de 0 à 7) au maximum.
Je voudrai non seulement choisir le nombre à sélectionner mais surtout avoir une bordure sur l'image sélectionner par exemple border-color: red;
Tout ça doit être stocker dans un cookie car après avoir sélectionner le nombre voulu, je clic sur un bouton qui me raméne dans un formulaire de login, enfin après être loggé, je récupére ma sélection.

J'espère être assez clair!!! Smiley smile

Modifié par raderuckus (22 Mar 2012 - 19:47)
Salut

Ok, alors ce que je te propose pour faire comme tu souhaites, et de récupérer l'identifiant de ton image côté serveur, sur un de ses attributs (exemple: id="" ou rel="" ), et sur clique tu le récupère, et tu fait un contrôle sur ta cookie (le plugin de jquery te facilitera la vie et il y a plein de documentation du comment faire sur internet http://archive.plugins.jquery.com/project/Cookie) pour voir est ce que tu dois la créer (si c'est la première fois que l'utilisateur clique) ou bien tu faits un contrôle sur celle que tu as déjà dedans et tu les gères comme tu souhaites (Toute fois je te conseil pour te faciliter la vie de séparer tes id au sein de la cookie par un caractère quelconque comme une virgule par exemple, et à la récupération de son contenu tu fait un splice pour avoir tes id dans un tableau). Et selon ton contrôle tu décides quoi faire après. N'oublie pas de supprimer la cookie si le client quitte le site pour que les choix d'un ancien client ne soit pas pris pour les siens.

Bon courage
Salut,

N'étant pas un développeur pur et dur, j'importe souvent jquery pour des petits projets, c'est pourquoi j'ai fait un tour sur la toile afin d'avoir des exemples pour démarrer, ce que j'ai fait pour le moment :
$('a', $('#mechier')).click(function(e){
var shadesli = $(".hover-shades");
$(shadesli).each(function(index) {
$this = $(this);
console.log(index + ': ' + $this.length);
if (index > 7){
alert('vous avez déjà choisi 8 nuances !');
$(".hover-shades").remove();
}
});
});

Mais présentement je stocke mes choix dans un cookie sauf que je sélectionne toutes les images et ce n'est pas ce que je veux bien sur.
Je ne sais pas où j'ai failli dans ce code ci-dessus.

Merci
Salut

Je vois ce que tu veux faire maintenant (tu as mené un petit changement de concept apparemment).

Alors pour ton code:

-Je suppose que cela cible bien des liens qui font référence à l'image (c a d: la récupération du lien me permis selon ta conception de connaitre l'image en question.):
$('a', $('#mechier')).click(function(e){

-Je suppose aussi que la classe que tu ajoutes aux éléments choisis "hover-shades" permet de distinguer ta sélection de 8 éléments, et que tu l'ajoutes à l'image.
-pour ça:
$this = $(this);
console.log(index + ': ' + $this.length);

Je ne comprends pas vraiment à quoi ça sert car le $this.length te donnera toujours 1. (C'est comme si tu dis: récupères moi le nombre d'items inclus dans ma sélection).
-Pour ça:
$(".hover-shades").remove();
Tu supprimes du DOM tout les éléments possédant la classe "hover-shades".

Je vais partir alors sur ta logique et essayer de te fournir une solution, qui si n'est pas compatible à ton cas pourra au moins t'aider à le résoudre, car j'ignore le cas réel de ton problème Smiley biggol Smiley smile , mais ça ne t'empêche pas de faire de l'effort pour se former sur ses technologies, (Et je vais supposer que ton image est dans la balise <a> sur laquelle tu as mis l'événement clique):


$('a', $('#mechier')).click(function(e){
	var img=$(this).children('img');
	
	if(img.hasClass('hover-shades')){ //Le client annule un choix qui est déjà fait
		img.removeClass('hover-shades'); //On supprime la class qui définit les éléments choisis dans la sélection
	}
	else{ //Le Client effetue un nouveau choix
		if($('.hover-shades').length<8){ //Le client à droit de choisir un autre item
			img.addClass('hover-shades');  //On ajoute la class qui définit les éléments choisis dans la sélection
		}
		else{ //Le client a atteint la limite des choix (Les éléments choisis>=8)
			alert('Un message au client');
		}
	}
});


Je t'ai fait un code pour pouvoir faire et annuler un choix (cela pour te débloquer en attendant que tu acquis les connaissances nécessaires).
Par suite au déclenchement de ton événement tu mets ta sélection dans une cookie à l'aide de ça (Je suppose qu'au chargement de ta page tu mets les identifiant dans l'attribut id de l'image):


...
var selection='';
$('.hover-shades').each(function(){
	selection=$(this).attr('id')+',';
});
selection=selection.substr(0,selection.length-1);
...
Et tu l'insères dans ta cookie


et quand tu le récupérera tu n'as qu'à faire un splice sur le contenu de la cookie par une virgule "," (Le séparateur auquel nous avions fait usage pour formater le String selection), et tu auras les id de tes images dans un tableau Smiley smile .

Bon courage (Et excuse moi pour le retard j'avais plein de boulot).
Modifié par unami (23 Mar 2012 - 18:16)