Botão que alterar o display

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Botão que alterar o display

Mensagem por Connor R. 02.02.20 22:30

Detalhes da questão


Endereço do fórum: https://somosmugiwara.forumeiros.com/forum
Versão do fórum: ModernBB

Descrição


Olá, quero implementar um botão que troca o display de uma div. Seria como quando apertar no botão, o display de tal div ficasse none. Seria possível?

Editado:

Consegui algo assim.

Código:

<input type="button" value="Reaparece a div" onclick="reapareceDiv()"/>
<input type="button" value="Esconde a div" onclick="escondeDiv()"/>

Código:

function escondeDiv() {
document.getElementById("blogjs").style.display = "none";
}
 
function reapareceDiv() {
document.getElementById("blogjs").style.display = "block";
}

Mas o mesmo apenas funciona no primeiro elemento com a ID blogjs, no exemplo abaixo o código funcionaria apenas no primeiro.

Código:

<div id="blogjs" class="blogjs" stat="0" style="
    background: url(https://i.imgur.com/GFmZr7D.jpg);
">                    <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico"></div>
<div id="blogjs" class="blogjs" stat="0" style="
    background: url(https://i.imgur.com/GFmZr7D.jpg);
">                    <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico"></div>
<div id="blogjs" class="blogjs" stat="0" style="
    background: url(https://i.imgur.com/GFmZr7D.jpg);
">                    <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico"></div>

Edit 2: Creio que saiba o que está ocorrendo, o código deve antes percorrer e fazer a contagem antes dos elementos, mas como poderia fazer esta contagem apenas com o id blogjs?
Connor R.

Connor R.
Membro do fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão que alterar o display

Mensagem por WizzardPT 03.02.20 15:18

Olá @Connor R., tudo bem?
Estive  a ver a sua dúvida e decidi resolver o problema não utilizando o JavaScript mas sim o jQuery.
Atualize o seu código para:
Código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>Ajuda @Connor R. By:WizzardPT</title>
    </head>
    <body>
        <input type="button" id="mostrar" value="Reaparece a div" onclick="reapareceDiv()"/>
        <input type="button" id="esconder" value="Esconde a div" onclick="escondeDiv()"/>
                
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                    
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                    
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                    
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>

        <script>
            $(document).ready(function() {
              $("#esconder").click(function() {
                $('div[id*="blogjs"]').hide();
              });

              $("#mostrar").click(function() {
                $('div[id*="blogjs"]').show();
              });
            });
        </script>
    </body>
</html>
Alguma dúvida não hesite em responder.

Cumprimentos,
WizzardPT.
WizzardPT

WizzardPT
Nível 6

Masculino
Inscrito dia : 17/09/2016
Mensagens : 60
Pontos ativos : 142

http://tug4eliteforum.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão que alterar o display

Mensagem por Connor R. 03.02.20 15:36

Olá, testei aqui no fórum abaixo, mas o código não foi funcional. Porém quando testo o seu código no https://jsfiddle.net/ ele funciona. Qual seria o problema?

https://somosmugiwara.forumeiros.com/f5-

Uma outra dúvida, eu poderia deixar apenas um botão? tipo pata true o display seria block e para false o display seria none, ou seja, um botão de ativar e desativar.
Connor R.

Connor R.
Membro do fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão que alterar o display

Mensagem por WizzardPT 03.02.20 15:42

Olá @Connor R.,
Colocou esta lib no seu código?
Código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Cumprimentos,
WizzardPT.
WizzardPT

WizzardPT
Nível 6

Masculino
Inscrito dia : 17/09/2016
Mensagens : 60
Pontos ativos : 142

http://tug4eliteforum.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão que alterar o display

Mensagem por Connor R. 03.02.20 15:46

sim coloquei, quando coloco o código pelo console, funciona perfeitamente.

PS: consegui fazer funcionar, tudo perfeito agora. Estava dando um erro no onclick. Mas quanto a questão de deixar apenas um botão, seria possível?

@WizzardPT

Consegui, usei o toggle. Vou testar e ver se é funcional.

Código:

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>Ajuda @Connor R. By:WizzardPT</title>
    </head>
    <body>
        <input type="button" id="esconderemostar" value="Esconde a div"/>
               
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                   
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                   
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                   
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
 
        <script>           
            $(document).ready(function(){
  $('#esconderemostar').click(function(){
    $('div[id*="blogjs"]').toggle();
  });
});
        </script>
    </body>
</html>
Connor R.

Connor R.
Membro do fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão que alterar o display

Mensagem por WizzardPT 03.02.20 16:17

Olá @Connor R., sim é possível.
Atualize o seu código para este:
Código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>Ajuda Forumeiros</title>
    </head>
    <body>
        <input type="button" id="mostrar" value="Reaparece a div" onclick="reapareceDiv()"/>
        <input type="button" id="esconder" value="Esconde a div" onclick="escondeDiv()"/>
               
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                   
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                   
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>
        <div id="blogjs" class="blogjs" stat="0" style="background: url(https://i.imgur.com/GFmZr7D.jpg);">                   
            <img src="https://2img.net/i/fa/empty.gif" alt="Você postou neste tópico" title="Você postou neste tópico">
        </div>

        <script>
            $(document).ready(function() {
            var flag;
              $("#esconder").click(function() {
                $('div[id*="blogjs"]').hide();
                $('input[id$="mostrar"]').show();
                $('input[id$="esconder"]').hide();
                flag=0;

                if(flag==0) {
                    $("#mostrar").click(function() {
                        $('div[id*="blogjs"]').show();
                        $('input[id$="mostrar"]').hide();
                        $('input[id$="esconder"]').show();
                        flag=1;
                    });
                }
              });
            });
        </script>
    </body>
</html>

Cumprimentos,
WizzardPT.
WizzardPT

WizzardPT
Nível 6

Masculino
Inscrito dia : 17/09/2016
Mensagens : 60
Pontos ativos : 142

http://tug4eliteforum.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão que alterar o display

Mensagem por Connor R. 03.02.20 16:21

Valeu cara, tudo resolvido. Consegui ajustar e o código que coloquei na minha última mensagem foi funcional.

Thanks.
Connor R.

Connor R.
Membro do fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Botão que alterar o display

Mensagem por WizzardPT 03.02.20 16:24

Alguma dúvida basta abrir outro tópico.
Tentarei ajudar no que puder e não puder Mostrando a lingua

Grato,
WizzardPT.
WizzardPT

WizzardPT
Nível 6

Masculino
Inscrito dia : 17/09/2016
Mensagens : 60
Pontos ativos : 142

http://tug4eliteforum.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão que alterar o display

Mensagem por pedxz 04.02.20 9:07

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6418
Pontos ativos : 7577

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissão neste fórum:
Você não pode responder aos tópicos