11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Règle css sur un enfant au clic sur parent jquery

Bonsoir

J'ai une boucle de miniatures d'articles (donc générés dynamiquement) que je voudrais développer au clic via une popin:

les id de chaque miniatures sont donc également générées dynamiquement

id= "myBtn1, 2, etc."

chacune de ces miniatures contient une div en display none par défaut de classe .modal.

twig


{% for membre in membres %}
   
  <a  class="col-12 col-md-4 membre members row" id="myBtn{{ loop.index }}">
    <div id="myModal{{loop.index}}" class="modal">
       <div id="modal-content" class="modal-content row white">
         <!-- Modal content -->
       </div>
    </div>
         <!-- thumbnail content -->                         
  </a>
                             
{% endfor %}


Mon idée est grace à jquery de récupérer l'id du bloc parent, pour commencer... A priori, ça marche:

current = 
$(this).attr('id');

Là ou je sèche c'est pour créer une méthode qui, non contente de récupérer l'id du parent au clic sur celui-ci (ça c'est bon!), pourrait dans le même temps afficher la div de classe "modal" qu'il contient.

J'ai donc essayé ceci....




$('.members').click(function () {
    current = $(this).attr('id');
 
   $(current).click(function(){
       $(current > div.modal).css('display', 'block');;
    });
    
     
});


Si quelqu'un a une idée moi j'ai mal à la tête....
Modifié par _laurent (28 Jan 2020 - 11:44)
Modérateur
Salut,

Pour mélange une variable et un sélecteur il faut des + Smiley smile 
$("#"+current+" > div.modal").css('display', 'block');


Et sinon je ne comprends pas pourquoi tu remets un click à l'intérieur du click...
Ça devrait suffire ça non :

$('.members').click(function () {
    current = $(this).attr('id');
   $("#"+current+" > div.modal").css('display', 'block');
});
Meilleure solution
Autre chose:

Pour fermer la pop-in, j'ai écrit ça:
La fonction

$('.close').click(function () {
    parent = $(this).parent();
    grandparent = $(parent).parent().attr('id');
   $("#" + grandparent).css('display', 'none');
 })

en gros la fameuse div.modal qu'on a affiché: on veut la fermer en cliquant sur la croix (.close).
La div.modal est grand-mère de (.close)
A priori la variable "grandparent" renvoie la bonne id à la console...
Par contre au clic sur la croix.... rien ne se passe et pas d'erreur console...

Après avoir cliquer sur la croix cependant, la derniere ligne de la fonction (d-none) ferme la pop-in. si on la rentredans la console..




C'est le $('.close').click(function () qui ne fonctionne pas?
Je veux bien assumer mon statut de "nioub" mais là... Smiley mur
CONSOLE


grandparent 
"myModal4"

$("#" + grandparent).css('display', 'none');
w.fn.init [div#myModal4.modal]



Merci pour le truc Jencal, je vais étudier ça... Smiley cligne
Modifié par kojeje (31 Jan 2020 - 12:13)
J'ai retravailler mes fonction de la manière suivante:


// Ouvrir la pop-in (ça marche nickel sauf le temps d'animation
$('.members').click(function () {
    current = $(this).attr('id');
    $("#" + current + " > div.modal").show('slow');
});
// Fermer la pop-in (ça marche pas en cliquant directement sur la croix)
$('.close').click(function () {
    parent = $(this).parent();
    grandparent = $(parent).parent().attr('id');
// PAR CONTRE une fois que le clic est fait on récupère bien les variables "parent" et "grandparent" et en entrant le code suivant en console, la pop-in disparait sans le temps de transition 
   $("#" + grandparent).hide('slow');
 })


Donc j'ai beau me triturer la cervelle ... Et la console.... Je ne comprends pas pourquoi la fermeture ne fonctionne pas directement au clic... Alors que l'ouverture, si....

Quant aux transitions.... Je ne m'y suis pas vraiment penché mais si quelqu'un a une idée...

Merci!
Modifié par kojeje (31 Jan 2020 - 13:11)
Sujet clos
Aller à