2012-11-10 4 views
1

Est-ce que quelqu'un sait ce que je fais mal? J'essaie d'avoir le "minus.png" sur le clic, il va supprimer le DIV, mais si vous cliquez sur le texte div, il supprime la div.jQuery pulsate div

Je ne veux pas être en mesure de cliquer sur la div et l'effacer sur pulsé, je veux être capable de cliquer sur l'image moins png, et il supprime, auriez-vous savoir ce que c'est que je Je fais mal?

Je suis sûr que c'est une solution simple, mais ça m'embête mal haha!

Merci!

<script> 
    $(document).ready(function() { 

     $(".pane").click(function() { 
     $(this).effect("pulsate", { times:2 }, 0000).fadeOut('slow').parents(".pane"); 
}); 

    }); 
    </script> 

    <div class="pane"> 
<a href=""><img align="right" src="http://uploadir.com/u/6hmr4fr1" alt="delete" class="delete" /></a> 
    Simple jQuery script I'm learning to work with, you mad bro? 
    </div> 

    <div class="pane"> 
    <a href=""><img align="right" src="http://uploadir.com/u/6hmr4fr1" alt="delete" class="delete" /></a> 
    Simple jQuery script I'm learning to work with, you mad bro? 
    </div> 

    <div class="pane"> 
    <a href=""><img align="right" src="http://uploadir.com/u/6hmr4fr1" alt="delete" class="delete" /></a> 
Simple jQuery script I'm learning to work with, you mad bro? 
    </div> 

    <div class="pane"> 
    <a href=""><img align="right" src="http://uploadir.com/u/6hmr4fr1" alt="delete" class="delete" /></a> 
    Simple jQuery script I'm learning to work with, you mad bro? 
    </div> 

code complet est ici:

http://jsfiddle.net/CgPJv/

Répondre

2

Peut-être $(".pane") ->$(".pane > a")

http://jsfiddle.net/CgPJv/6/

Vous lier clique sur l'ensemble div, au lieu de les lier au un élément comme vous avez dit

$(".pane > a").click(function (event) { 
    event.preventDefault(); 
    $(this).parent().effect("pulsate", { times:2 }).fadeOut('slow'); 
}); 
+0

Merci, je comprends maintenant. J'apprécie ton aide! – TrippedStackers

3

Vous devez joindre l'événement click à l'élément img, puis avec closest() bulles jusqu'à trouver sa .pane et fade out, comme ceci:

$(document).ready(function() { 
     $(".pane img").click(function (e) { 
     e.preventDefault(); 
     $(this).closest('.pane').effect("pulsate", { times:2 }, 0000).fadeOut('slow'); 
     }); 
}); 

Voir travail demo

3

Vous pouvez joindre l'événement click à l'image réelle,

$(".pane > a > img").on('click... 

Ou vous pouvez aller directement pour l'attribut alt de l'élément d'image -

$(".pane img[alt='delete']").on('click... 

J'aime toujours être aussi bavard que possible avec mes sélecteurs que je trouve améliore la lisibilité et rend le débogage beaucoup plus rapide. Dans les deux cas, pour obtenir l'élément que vous souhaitez réellement masquer, vous devez utiliser la fonction closest(). Dans les deux cas, vous devez utiliser la fonction closest() dans les deux cas.

$(".pane img[alt='delete']").on('click',function() { 
    var paneElement = $(this).closest('.pane'); 
    paneElement.effect("pulsate", { times:2 }, 0000).fadeOut('slow'); 
    return false; 
}); 

Enfin, je ne suis pas trop sûr de ce que vous essayez de faire avec .parents(".pane"). C'était à la fin du commandement et cela n'a vraiment pas eu d'effet. Vous pouvez le laisser dehors.

+1

bravo mon ami! – TrippedStackers

4

Code Example

$('.pane a').click(function() { 
    $(this).closest('.pane').effect('pulsate', { times:2 }, 0000).fadeOut('slow'); 
    return false; 
}); 

Vous devez également donner à l'étiquette a valeur href. Le garder vide est contre les normes. Vous pouvez utiliser href="#".

1

DEMO - Que diriez-vous d'une petite animation slideUp() pour garder le style?

+1

Je t'aime mec, merci pour ça, j'ai en fait aimé la façon beaucoup plus propre de glisser .. MERCI HOMME! – TrippedStackers

+0

De rien. :) – Coby