How to Fade Only Item Clicked

Asked

Viewed 546 times

4

Here’s what I’m trying to do: I got a looping coming from the database.
When I click on a button of one of the results, I wanted to make a fadein div appear.
Turns out when I click on one, the div shows up at all.

How do I make clicking on the first div, for example, appear only on this div and not at all?

UPDATING

Let’s go to HTML code, it’s a bit 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 am trying to make a confirmation to delete or not a user!

jquery html
  • 2

    Please post some code that demonstrates how you are building your solution. Not knowing how you’re doing, we have to do a little guessing to help you ;)

  • 1

    Welcome! Regarding your question: Not seeing your code doesn’t help much. Put here the part of the code with Event Handler and the HTML structure of the Divs that refers.

2 answers

1


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

So I could use:

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

Another problem I think there is here is duplicate ID’s. That’s invalid HTML. So you can remove the Ids from the buttons since it also has classes and use so:

$(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 Voce intends.

  • I think ,eu HTML is really confusing. What I’m doing is, on the page appear the Divs with the user data. Soon appear the two buttons "Active" that when clicking disables the user who is active (in this case the button switches to "Disabled" and has the "Delete" button, which when clicking, appears in fadein div effect with the question and the other two buttons, "yes" and "no", by clicking yes it excludes the user and if click no, it causes the Div disappear with fadeOut effect. I tried to make some kind of confirmation!

  • @user4598, you know how you want to look visual, but I think the HTML you put in has elements <a> the more. I could simplify and use my class suggestion instead of ID

  • Yes of course, your suggestion was very welcome, I’m testing all. The problem is that I scrambled myself in my own code... rsrsrs Because at first, I would not have the confirmation to delete, after I entered that I started to come across this little problem and from what I’m seeing I also have a code problem.

  • One thing I realized is that in all the codes that you’ve given me to test, when I enter "this" it doesn’t work anymore. I think I must be doing something very wrong!

  • @user4598, make a jsfiddle with your code and post here. http:/jsfiddle.net

  • Well, the code is this: http://jsfiddle.net/pgc92/ I don’t know how to thank you for your help! Thank you!

  • @user4598, I have now seen the/fiddle code. It is already working as you want?

  • That’s because each user comes from the database looping! .

  • @user4598 is this what you want?: http://jsfiddle.net/8xCqz/

  • Perfect, that’s exactly what I was losing some hair to get it done! I just didn’t understand why when I inserted "this", javascript stopped. Once again, I don’t know how to thank you for your patience and dedication in helping me.

  • @user4598, good that it works. If you want you can mark my answer as sure. And by the way, if you have another question another day you can include jsFiddle from the beginning, so others can help better.

  • Yes, it worked perfectly. Thanks again for the help, and next time I start with the jsFiddle link...rsrs !

Show 7 more comments

1

What must be happening is that you are clicking through a class, assuming the following HTML code

 <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 which has the class will appear. What you need to do is find the div next to the button and fade into it. Example:

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

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.