Diver parent div en cliquant sur le lien enfant

J'ai cherché d'autres moyens de le faire, mais je n'ai trouvé de réponses que dans l'autre sens (évanouissement de l'enfant quand on clique sur le parent) - en gros, j'ai des boîtes avec des objectifs qui peut être accepté en cliquant sur un lien. Ce que je veux, c'est que la boîte disparaisse lorsque vous cliquez sur le lien "Accepter" - Je vais ajouter un appel AJAX plus tard pour que cette acceptation soit stockée dans une base de données.Diver parent div en cliquant sur le lien enfant

Mon code jQuery à l'heure actuelle ne fait que masquer le lien lui-même lorsque vous cliquez dessus. Je ne sais pas quoi faire maintenant pour que toute la boîte se fane quand le lien est cliqué. Je vous remercie!

boxes.php

<div id='goal'> 
    <div class='setby'>Set on 2013-12-31 16:02:35 by me</div> 
    <div class='goal'>Climb Mount Kilimanjaro.</div> 
    <div class='completeby'> 
     Complete by 0000-00-00 00:00:00 - 
     <a id='accept' href='#'>Accept?</a> 
    </div> 
</div>

script.js

$(document).ready(function() { 
    $('a#accept').click(function() { 
     $(this).fadeOut('slow'); 
     }); 
    });

Source

2014-06-11 user3306998

Vous souhaitez utiliser la fonction closest pour trouver le but parent div et de fondu sur:

$('a#accept').click(function() { 
    $(this).closest('#goal').fadeOut('slow');   
});

En utilisant closest il remonter la à travers les éléments parents jusqu'à ce qu'il trouve celui requis. Ceci est utile car votre code HTML peut changer mais tant qu'il est toujours le même contenant le code jQuery fonctionnera. En outre, comme Jay l'a mentionné, l'utilisation d'un ID pour identifier le parent (et le lien d'acceptation) n'est pas une bonne idée car les ID doivent être uniques dans le document. Au lieu de cela les classes pourraient être utilisées à la fois:

<div class='goal-parent'> 
    <div class='setby'>Set on 2013-12-31 16:02:35 by me</div> 
    <div class='goal'>Climb Mount Kilimanjaro.</div> 
    <div class='completeby'> 
     Complete by 0000-00-00 00:00:00 - 
     <a class='accept' href='#'>Accept?</a> 
    </div> 
</div>

Et le script changeraient à:

$('a.accept').click(function() { 
    $(this).closest('.goal-parent').fadeOut('slow');  
});

Exemple de travail - http://jsfiddle.net/URLT8/

Source

2014-06-11 14:21:06

Le seul problème que je vois avec cela est qu'il ne peut pas être réutilisé car 'objectif' est un identifiant. J'espère que l'OP ne réutilise pas les identifiants dans une page. –

Le problème est que ces boîtes sont générées à partir d'une table de base de données - je ne sais pas comment je ferais pour avoir des ID uniques séparés à chaque fois! – user3306998

@JayBlanchard Merci pour la modification. J'ai juste remarqué que j'avais copié le mauvais morceau. –

suffit de regarder pour les parents -

$(document).ready(function() { 
    $('a#accept').click(function() { 
     $(this).closest('div').fadeOut('slow'); 
     }); 
    });

Mais vous ne devraient pas utiliser de double de id dans une page et je crains t Vous pouvez en avoir ('accepter', 'but', etc.)

Source

2014-06-11 14:19:40

Comme vous l'avez dit dans votre titre. Ciblez le parent du lien.

$(document).ready(function() { 
    $('a#accept').click(function() { 
     $(this).parent().fadeOut('slow'); 
    }); 
});

Source

2014-06-11 14:19:43 ZiNNED

Le parent du Accepter le lien est completeby div, de sorte que ce sera caché plutôt que toute la boîte de l'objectif. –

utilisation:

$(this).parent().fadeOut("slow");

Source

2014-06-11 14:19:59 Mark

Le parent du lien accept est completeby div, donc ce sera caché plutôt que la boîte de l'objectif entier. –

pouvez utiliser:

$(this).parent().parent().fadeOut("slow");

Source

2014-06-11 14:35:50 Mark

Diver parent div en cliquant sur le lien enfant

Répondre

Questions connexes