1

Tenho essa tela pra inserir imagens no sistema, a parte da inserção funciona certinho, só que quero que ao clicar numa imagem, apareça o botão editar conforme na imagem, e se clicar novamente nessa imagem, quero q o botão suma, eu vi esse tal de collapse do bootstrap, e resolvi tentar, mas não estou conseguindo fazer funcionarinserir a descrição da imagem aqui

o que fiz foi isso, o html é criado dinamicamente como no codigo abaixo:

                var reader = new FileReader();
                reader.onload = (function(imageFile){
                    return function(e){
                        //Render Thumnails
                        var li = $('<li/>',{class:"col-xs-12 col-sm-6 col-md-3 col-lg-3"});
                        var a = $('<a/>',{
                            href:"javascript:void(0)",
                            class:"thumbnail"
                        });
                        var button = $('<button/>',{
                            class:"btn btn-success collapse",
                            type:"button",
                            id:"teste",
                            html:"Editar"
                        });
                        var image = $('<img/>',{
                            toggle:"collapse",
                            target:"#teste",
                            src:e.target.result,
                            title:escape(imageFile.name)
                        }).appendTo(a).click(function(){
                            $('#imageList').data('current', $(this).attr('src'));
                            //alert($(this).attr('src'));
                            image_x = ($(this).attr('src'));
                                li.append(button).appendTo($('#imageList'));
                            });
                        li.append(a).appendTo($('#imageList'));
                    }
                })(f);

1 Resposta 1

1

Você pode usar o método toggle do jQuery que serve para exibir ou ocultar os elementos.

Como o código é gerado dinamicamente user o .on

Exemplo:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $("button").on( "click", function() {
            $( "p" ).toggle("slow");
        });     
      });
    </script>

</head>
<body>

    <div>
        <button>Toggle 'em</button>
        <p>Hiya</p>
        <p>Such interesting text, eh?</p>
    </div>

</body>
</html>

Referências:

http://api.jquery.com/toggle/

http://api.jquery.com/on/

1
  • uso o on com o que? com o clique ou com o toggle? não consegui entender mto bem isso pro meu caso... Commented 12/03/2016 às 4:10

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 .