im récupérant des produits de la base de données de manière dynamique dans ma page. Cependant, je souhaite masquer les détails du produit et montrer simplement le titre du produit, puis lorsqu'un utilisateur clique sur le titre, puis les détails du produit montrent. Ces détails ne doivent être que pour le titre de produit cliqué en particulier qui a un identifiant généré unique.
<!-- Jquery -->
<script type="text/javascript">
$(document).ready(function() {
$(document).ready(function () {
$(".products-list li p").click(function(e){
$('.prd-details').toggle();
});
});
});
</script>
3 Réponses :
Vous devez récupérer les Détails de PRD par rapport à l'élément cliqué comme
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products-list">
<li class="cstm-list">
<p id="cprd_622">Product A</p>
<div class="prd-details" style="display: none;">
<img src="/uploads/product/large/Alienware.jpeg">
<p>description</p>
<p>price</p>
</div>
</li>
<li class="cstm-list">
<p id="cprd_623">Product B</p>
<div class="prd-details" style="display: none;">
<img src="/uploads/product/large/Alienware.jpeg">
<p>description</p>
<p>price</p>
</div>
</li>
<li class="cstm-list">
<p id="cprd_624">Product C</p>
<div class="prd-details" style="display: none;">
<img src="/uploads/product/large/Alienware.jpeg">
<p>description</p>
<p>price</p>
</div>
</li>Cela fonctionne merci. Est-il également possible que lorsque je clique sur un titre de produit différent, le précédent se cachera automatiquement?
Oui, vous devrez ajouter $ ('. PRD-Détails'). Masquer (); dans la fonction de clic avant la bascule
Remplacez votre
ou tout le code est comme suit ...
Je ne connais pas le principe d'ajout de l'extrait de code, l'extrait en ligne peut fonctionner ou non, mais apportez simplement des modifications à votre code code> jQuery code> uniquement. Cela fonctionnera. P> p> $ ('. prd-détails'). Basculer (); code>
avec ce qui suit ....................................... $ (this) .parent () .Find ('. PRD-Détails'). Bascule ('Fast', fonction () {}); code> p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products-list">
<li class="cstm-list">
<p id="cprd_622">Product A</p>
<div class="prd-details" style="display: none;">
<img src="/uploads/product/large/Alienware.jpeg">
<p>description</p>
<p>price</p>
</div>
</li>
<li class="cstm-list">
<p id="cprd_623">Product B</p>
<div class="prd-details" style="display: none;">
<img src="/uploads/product/large/Alienware.jpeg">
<p>description</p>
<p>price</p>
</div>
</li>
<li class="cstm-list">
<p id="cprd_624">Product C</p>
<div class="prd-details" style="display: none;">
<img src="/uploads/product/large/Alienware.jpeg">
<p>description</p>
<p>price</p>
</div>
</li>
</ul
Cela fonctionne beaucoup merci beaucoup. Est-il également possible que lorsque je clique sur un titre de produit différent, le précédent se cachera automatiquement?
@Fungayimakoni Oui, comme mentionné par le madalinivascu. dans la réponse ci-dessus.
Code CSS
$(document).ready(function() {
$(".products-list li p").click(function(){
$(this).next('.prd-details').toggle("show");
});
});
Comme vous ne fournissez aucune information sur ce qui ne fonctionne pas, je m'attends à ce que tout fonctionne
Oops. Ce qui ne fonctionne pas, c'est que lorsque je clique sur le titre du produit, tous les autres détails du produit sont encore en avoir besoin d'un à un moment cliqué