Cacher la <p> et afficher la <textarea> sur un <a> cliquer

Je sais que le titre semble assez facile, mais le vrai problème est le balisage. J'ai un lien dans un div qui, également dans un autre div, mais la zone de texte et le paragraphe se trouvent dans une autre division. C'est pourquoi j'ai un problème sur la façon de montrer et de masquer les éléments dans une division à balayage complètement différente d'une division de balle complètement différente.

J'ai vu .parent() et .children() et .siblings() . Mais ils ne pouvaient pas m'empêcher ou je pensais que je ne pouvais pas les aider.

Voici le violon .

Voici le JS que j'ai essayé:

 $(".no_link").click(function(e) { e.preventDefault(); }); $(".edit_offer").on('click', function() { $(this).parent().parent().siblings().children("textarea").toggle(); }); 

Vous pouvez utiliser ces sélecteurs, mais cela dépendra du username la classe dans l'héritage comme vous l'avez dans votre code:

 $(".edit_offer").on('click', function () { $(this).closest('.username').find("textarea").toggle(); }); 

JsFiddle exemple

.closest() le DOM jusqu'à ce qu'il frappe l'élément avec le username classe, alors .find() descendra par les enfants qui cherchent la zone de texte.

Je l'ai fait en utilisant find() . http://jsfiddle.net/SZUT8/2/ Pour rendre le script plus précis et à l'épreuve du futur, vous pourriez envisager d'ajouter une classe au paragraphe et de l'associer, comme ici: http://jsfiddle.net/SZUT8/4 /

Vous pouvez toujours attribuer une ID (ou une classe , pour plusieurs) à chacun des éléments souhaités ("p" et "textarea" dans votre cas). Ensuite, utilisez votre ID / classe pour les référencer pour les méthodes show() ou hide() , plutôt que de naviguer le DOM via parent() , sibling() et les children() .

Ensuite, votre gestionnaire de clics ne nécessite que la ligne:

$('#idOfElement).toggle();