Botão que alterar o display

Item: Botão que alterar o display
Rating: 1

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?

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.

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.

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.

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>

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.

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.

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.

por **tikky** 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.