4

Estou tentando fazer o seguinte: Tenho um looping vindo do banco de dados.
Quando clico em um botão de um dos resultados, queria fazer aparecer uma div em fadeIn.
Acontece que quando clico em um, a div aparece em todos.

Como faço para que ao clica na primeira div, por exemplo, apareça apenas nesta div e não em todas?

ATUALIZAÇÃO

Vamos ao código HTML, esta um pouco bagunçado:

<div class="bloco_white_middle shadow user">
   <div class="bl_conf_user j_conf">
     <p class="block_username">
        Excluir o Usuário(a) <b>Leandro?</b>
     </p>
     <div class="block_buttons">
        <a href="usuario_listar.php?acao=excluir&id=1" title="Desativar Usuário" class="btn_middle_icon btn_aprovar" style="margin-right:5px;">
           <div class="icon-ok"></div>Sim
        </a>
        <a href="usuario_listar.php" title="Excluir Usuário" class="btn_middle_icon btn_excluir" id="btn_no">
           <div class="icon-remove"></div>Não
        </a>
     </div>
   </div>
   <strong>Nome:</strong> <em>Leandro</em>
   <p style="margin-top:6px;">
      <strong>Data registro:</strong> <em>10/05/2013</em>
   </p>
   <p style="margin-top:6px;">
      <strong>Último acesso:</strong> <em>12/12/2013</em>
   </p>
   <p style="margin-top:6px;">
      <strong>Acesso:</strong><em>Usuário</em>
   </p>
   <a href="usuario_listar.php?acao=desativar&id=1" title="Desativar Usuário" class="btn_middle_icon btn_aprovar" style="margin-right:5px;">
     <div class="icon-ok"></div>Ativo
   </a>';
   <a href="usuario_listar.php?acao=excluir&id=1" title="Excluir Usuário" class="btn_middle_icon btn_excluir" style="margin-right:10px;" id="btn_exc">
      <div class="icon-trash"></div>Excluir
   </a>
</div>

Depois, tem o código jquery:

<script type="text/javascript">
$(document).ready(function(){
    $('.j_conf').hide();
    $('#btn_exc').live('click', function() {
    $('.j_conf').fadeIn("slow");
    return false;
    });

    $('#btn_no').live('click', function() {
    $('.j_conf').fadeOut("slow");
    return false;
    });
});
</script>

Na verdade, estou tentando fazer uma confirmação para excluir ou não um usuário!

2
  • 2
    Por favor, poste um pouco de código que demonstre como você está construindo sua solução. Sem saber como você está fazendo, temos que fazer um pouco de adivinhação para ajudá-lo ;) Commented 4/02/2014 às 13:24
  • 1
    Bem vindo! Em relação à sua pergunta: Sem ver o seu codigo não dá para ajudar muito. Coloque aqui a parte do codigo com o event handler e a estrutura HTML das divs que refere.
    – Sergio
    Commented 4/02/2014 às 13:25

2 Respostas 2

1

Parece-me que um dos problemas aqui é que você faz fadeIn/Out a todos os elementos com uma classe específica, o melhor é referenciá-lo por this.

Assim poderia usar:

$(this).closest('user').find('.j_conf').fadeIn("slow");

Outro problema que me parece haver aqui é de ID's duplicadas. Isso é HTML inválido. Assim você pode retirar as IDs dos botões uma vez que também tem classes e usar assim:

$(document).ready(function () {
    $('.j_conf').hide(); // aqui seria melhor ter no CSS .j_conf{display: none;}
    $('.j_excluir').live('click', function () {
        $(this).closest('.user').find('.j_conf').fadeIn("slow");
        return false;
    });

    $('.j_nexcluir').live('click', function () {
        $(this).closest('.user').find('.j_conf').fadeOut("slow");
        return false;
    });
});

O seu HTML não é mto claro, por vezes tem: ?acao=excluir e class="btn_aprovar" no mesmo elemento. Eu deixo aqui uma sugestão como o que eu penso ser o que voce pretende.

12
  • Acho que ,eu HTML esta mesmo confuso. O que estou fazendo é, na página aparecem as divs com os dados dos usuários. Logo aparecem os dois botões "Ativo" que ao clicar desativa o usuário que esta ativo (neste caso o botão muda para "Desativado" e tem o botão de "Excluir", que ao clicar, aparece em efeito fadeIn div com a pergunta e os outros dois botões, "sim" e "não", ao clicar em sim ele exclui o usuário e se clicar em não, ele faz com que a Div desapareça com efeito fadeOut. Tentei fazer um tipo de confirmação!
    – LeandroCSA
    Commented 4/02/2014 às 13:49
  • @user4598, você é que sabe como quer ter o aspecto visual, mas eu penso que no HTML que colocou tem elementos <a> a mais. Podia simplificar e usar a minha sugestão de classes em vez de ID
    – Sergio
    Commented 4/02/2014 às 13:52
  • Sim claro, sua sugestão foi muito bem vinda, estou testando todas. O problema é que eu mesmo me embaralhei no meu próprio código... rsrsrs Pois a princípio, não teria a confirmação para excluir, depois que eu inseri isso que comecei a me deparar com esse probleminha e pelo que estou vendo também tenho um problema de código.
    – LeandroCSA
    Commented 4/02/2014 às 14:00
  • Uma coisa que percebi é que em todos os códigos que vocês me passaram para testar, quando eu insiro o "this" ele não funciona mais. Acho que eu devo estar fazendo algo muito errado!
    – LeandroCSA
    Commented 4/02/2014 às 14:32
  • @user4598, faca um jsfiddle com o seu codigo e poste aqui. jsfiddle.net
    – Sergio
    Commented 4/02/2014 às 14:59
1

O que deve estar acontecendo é que você está fazendo o click por uma classe, supondo o seguinte código HTML

 <td>
   <input type="button" class=".botao"></input>
    <div class="fadeIn"></div>
 </td>
 <td>
   <input type="button" class=".botao"></input>
   <div class="fadeIn"></div>
 </td>


$(".botao").click(function(){
    $(".div").fadein();
})

Assim todas as divs que tem a classe irão aparecer. O que você precisa fazer é encontrar a div próxima ao botão e dar fadeIn nela. Exemplo:

$(".botao").click(function(){
   $(this).next(".fadeIn").fadein();
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .