How to give a FadeIn only in the Clicked Item

Question

How to give a FadeIn only in the Clicked Item

Navigation

#1 by (1 votes)
#2 by (1 votes)

4

I'm trying to do the following: I have a looping coming from the database.
When I click on a button on one of the results, I wanted to make a div appear in fadeIn. It turns out that when I click on one, the div appears in all.

How do I click the first div, for example, to appear only in this div and not at all?

UPDATE

Let's go to the HTML code, it's a little messy:

<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>

Then you have the jquery code:

<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>

Actually, I'm trying to make a confirmation to delete a user or not!

html jquery

asked by anonymous 04.02.2014 / 14:22

2 answers

1

What should be happening is that you are clicking through a class, assuming the following 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();
})

So all the divs that has the class will appear. What you need to do is find the div next to the button and fade in it. Example:

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

04.02.2014 / 14:40

Disable input text when clicking on another input text Accept only one comma in Textbox c # WPF

score 1 · Accepted Answer

It seems to me that one of the problems here is that you do fadeIn / Out to all elements with a specific class, it is best to reference it with this .

So you could use:

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

Another problem that seems to me to be here is duplicate ID's. This is invalid HTML. So you can remove the button IDs since it also has classes and use like this:

$(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;
    });
});

Your HTML is not very clear, sometimes it has: ?acao=excluir and class="btn_aprovar" in the same element. I leave here a suggestion as what I think is what you intend.