11484 sujets

JavaScript, DOM et API Web HTML5

[resolu]Jquery $(this)

Bonjour tout le monde.

Voila le contexte : J'ai une pages avec 9 photos (article à vendre) l'idée est de faire apparaitre sous chacune des photos un prix en fonction d'une liste déroulante. Affiché le prix en fonction de la liste ça pas de problème. Ce qui me pose problème est que le prix n'apparaisse uniquement sous l'article (la photo corresondante).

Actuellement : le bon prix s'affice mais sous toutes les photos. Ce que j'aimerai c'est que prix apparaissent uniquement sous la photo dont l'internaute a sélectionné le menu déroulant.

Ci-après le script me permettant de récupérer ce prix

$('.form-control.radius.quantite_numero.item_quantity').focusout(function(){
						if($(this).parents($('.miniature.simpleCart_shelfItem.magazine')).find($('.form-control.radius.lieu_livraison_numero option:selected')).val()=='fr'){
var tarif_unitaire = $(this).parents($('.miniature.simpleCart_shelfItem.magazine')).find($('.prix')).attr('data-price-fr');
						}
	else{
	var tarif_unitaire = $(this).parents($('.miniature.simpleCart_shelfItem.magazine')).find($('.prix')).attr('data-price-monde');
						}
						$(this).parents($('.miniature.simpleCart_shelfItem.magazine')).find($('.prix_unitaire_simple_cart.item_price')).html(tarif_unitaire);	
						});


Ma question : Comment faire pour que le prix ne s'affiche que sous la photo correspondante.
Je pensais que $('this') permettait cela.....
Modifié par Soxy95 (02 May 2016 - 10:32)
Bonjour,

Oui, le $(this) réglera probablement ton problème, mais il nous faudrait l'architecture HTML (pas tout, uniquement centré sur tes photos et tes select, et pas forcément le code pour les 9 !) pour pouvoir t'aider au mieux.
Bonjour,

Déjà merci d'avoir pris le temps de regarder mon problème.

Voici le HTML se répétant 9 fois 

<div class="col-md-4 col-sm-6">
	<div class="miniature simpleCart_shelfItem magazine">
		<p class="item_name_shelfItem" >Novembre/Décembre</p>
		<img src="http://dev.id-meneo.com/femmemajuscule/images/nov_dec_2015.jpg" class="img-thumbnail">
		<form method="post" role="form">
			<div class="form_miniature">
				<div class="form-group">
					<div class="row">
						<div class="prix" data-price-fr="4.50" data-price-monde="5"><span class="value item_price">4.50</span> €
						<span class="prix_unitaire_simple_cart item_price"></span></div>
					</div>
					<div class="row">
					<div class="col-md-5">
						<label for="quantite" class="label_top">Quantité</label> 
						<input type="number" class="form-control radius quantite_numero item_quantity " value="1" min="0" max="100" placeholder="quantité" data-price="7">
					</div>
					<div class="col-md-7">
						<label for="abonnement" class="label_top">Lieu de livraison</label>  
						<select name="lieu_livraison_numero" class="form-control radius lieu_livraison_numero"> 
							<option value="fr">France métroplitaine</option>
							<option value="monde">TOM & reste du monde</option>	
						</select>
					</div>
				</div>
				<div class="row">
				<button type="button" class="btn radius item_add btn_ajout_abo mise_au_panier_animation">Ajoutez au panier</button> 
				</div>
			</div>
		</div>
	</form> 
</div>
</div>


Le prix à afficher doit se trouver dans le span class="prix_unitaire_simple_cart item_price".
Désolé pour l'indentation un peu dégueu.... mais j'ai essayé de faire au mieux.....
Modifié par Soxy95 (02 May 2016 - 09:56)
Modérateur
Sans avoir tout lu, attention que tu écris $('this') avec quote alors qu'il n'en faut pas... $(this)
Salut,

j'ai re-éditer mon titre.
Car il n'y avait pas de quote dans mon code. C’était un essais que j'avais fait.

Merci en tout cas.
Déjà, utilise plutôt l'événement change (plutôt que focusout), ensuite réduit tes sélecteurs, parce que c'est un peu illisible, ce qui donne un truc comme ça :
$('.item_quantity, .lieu_livraison_numero').change(function(){
  $el_parent = $(this).closest('.simpleCart_shelfItem.magazine')
  $el_prix = $el_parent.find('.prix')
  
  if( $el_parent.find('.lieu_livraison_numero').val()=='fr' ) {
    var tarif_unitaire = $el_prix.data('price-fr');
  } else {
    var tarif_unitaire = $el_prix.data('price-monde');
  }
  $el_parent.find('.prix_unitaire_simple_cart').html(tarif_unitaire);	
});

Comme tu peux le voir, tu peux même coller l'écouteur sur tes deux éléments de formulaire en même temps.

EDIT : surtout BIEN PENSER à vérifier en aval tes prix côté serveur !
Modifié par SolidSnake (02 May 2016 - 11:01)
Modérateur
Ok désolé du post inutile alors Smiley cligne
J'ai ajouté ton code dans un CodePen mais il ne reflète pas tout à fait tes explications...
Tu peux modifier pour avoir ton rendu actuel stp ?
Merci SolidSnake, tu ne t'en souviens surement pas mais c'est a seconde fois que tu m'aides !

Je ne savais pas que je pouvais écrire cela :
SolidSnake a écrit :

$('.item_quantity, .lieu_livraison_numero')

Je n'avais jamais mis de "," dans un selecteur va falloir que je me penche la dessus.

Yordi a écrit :

Ok désolé du post inutile alors Smiley cligne
J'ai ajouté ton code dans un CodePen mais il ne reflète pas tout à fait tes explications...
Tu peux modifier pour avoir ton rendu actuel stp ?


Si si le comportement était exactement celui-là. Il y a deux prix car celui que je cherche à afficher sert complètement à autre chose. il serait un peu long d'expliquer pourquoi ici.

En tout cas encore un grand merci à vous deux de vous être penché sur mon problème.
Problème résolu Smiley lol
Modifié par Soxy95 (02 May 2016 - 11:20)
Soxy95 a écrit :
Merci SolidSnake, tu ne t'en souviens surement pas mais c'est a seconde fois que tu m'aides !

Si Smiley lol
Soxy95 a écrit :
Je n'avais jamais mis de "," dans un selecteur va falloir que je me penche la dessus.

C'est le même sélecteur qu'en CSS pour sélectionner plusieurs éléments en même temps.
Sujet clos
Aller à