0

Eu tenho uma galeria de produtos e o lado existe alguns botões que são as categorias desses produtos (botões: gabinete, monitores, mouse, cadeiras, etc), quando eu clicar nessa categoria, um toggle ativa somente os produtos daquela categoria específica.

No entanto, eu quero que acima desses produtos contenha um título que inicialmente será assim: "Produtos" (esse é o padrão), mas quando eu clicar na categoria Gabinete, por exemplo, esse título será alterado para "Gabinetes". Deu pra entender?

Pois bem, eu quero que isso aconteça com todos os outros botões sempre alterando o título em tempo de execução.

Eu até tentei criar uma function ao clicar usando GetElementById junto com uma IF ELSE, mas ele aplica a primeira validação apenas.

Alguém que já fez algo parecido poderia me ajudar?

Importante: Eu estou pegando os botões do banco de dados, simplesmente eu fiz uma instrução WHILE que vai repetir os botões de acordo com a quantidade de categorias cadastradas no banco de dados, então não tem assim logo de cara, como adicionar uma função diferente para cada botão. Tem como, mas não tão facilmente.

5
  • Você está usando jquery? Commented 22/06/2018 às 16:20
  • 3
    Coloque na pergunta o código que você fez para olharmos o que pode estar errado.
    – Woss
    Commented 22/06/2018 às 16:20
  • Bem-vindo, importante ler esse post para obter sucesso nas suas próximas perguntas pt.stackoverflow.com/help/mcve e marcar uma resposta como aceita i.sstatic.net/evLUR.png e porque marcar como aceita pt.meta.stackoverflow.com/questions/1078/…
    – user60252
    Commented 22/06/2018 às 19:35
  • Olá @MarceloUchimura! Não estou usando o jQuery.
    – lougansjs
    Commented 23/06/2018 às 19:30
  • @AndersonCarlosWoss Então, como é um problema de um site de um cliente, meu gestor não permitiu divulgar parte do código, mas os amigos ali abaixo, responderam de acordo com o descritivo que dei e deu certo, mas em futuras perguntas, vou tentar postar o código ^^ Grato!!
    – lougansjs
    Commented 23/06/2018 às 19:31

2 Respostas 2

1

Uma alternativa usando Jquery

$(".btn").click(function(){
    var name = $(this).text();
    $("#meuh1").html(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="meuh1">Produtos</h1>

<button class=btn>Gabinetes</button>

<button class=btn>Processadores</button>

<button class=btn>Discos Rígidos</button>

<button class=btn>Memórias RAM e ROM</button>

text()- retorna o texto do elemento

$(this)

  • $() é a função construtora do jQuery.
  • this é uma referência ao elemento DOM invocado.
  • Então em $(this) você está passando this para a função $() como parâmetro, no caso em questão o texto do elemento text()


Mudando o H1 e apresentando o texto correspondente

$(".btn").click(function(){
    $('div[id^="div_"]').hide(); 
    var name = $(this).text();
    $("#meuh1").html(name);
    var id = $(this).attr('id');
    $("#div_"+id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="meuh1">Produtos</h1>

<button id="bt1" class=btn>Gabinetes</button>

<button id="bt2" class=btn>Processadores</button>

<button id="bt3" class=btn>Discos Rígidos</button>

<button id="bt4" class=btn>Memórias RAM e ROM</button>


<div id="div_bt1" style="display:none">Gabinetes de várias marcas e modelos</div>
<div id="div_bt2" style="display:none">Processadores de última geração</div>
<div id="div_bt3" style="display:none">Discos Rígidos de até 4MB, rs :)</div>
<div id="div_bt4" style="display:none">Memórias RAM e ROM</div>

3
  • BOOA! Era isso mesmo que eu precisava, claro que precisarei fazer alguns ajustes quanto ao meu código, até porque, eu não posso de forma simples, inserir uma propriedade "id" pra cada button pois eu faço um While (php) e passo apenas um <button id="bt1" class=btn>Gabinetes</button>, os outros são gerados automaticamente pelo laço. Mas isso é outra questão, eu dou um jeito. O jQuery reduziu significativamente o código que eu já tinha pra tentar solucionar o problema, ia ser um pouco extenso. VLWWW
    – lougansjs
    Commented 23/06/2018 às 19:35
  • @LougansdeMatos, uai, só colocar um contador no laço e concatenar com o valor do id
    – user60252
    Commented 23/06/2018 às 19:59
  • Uhumm :D ^^ vlw man
    – lougansjs
    Commented 23/06/2018 às 20:02
1

Veja se isto é o que você precisa:

<h2 id="meuh2">Produtos</h2>

<p>Nonononononono nonono nonono.</p>

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

<p>
<select id="s" onchange="esse_mudou(this.value)">
  <option>Produtos</option>
  <option>Gabinetes</option>
  <option>Sabonete líquido</option>
  <option>Ração para cágados</option>
  <option>Buzina de calhambeque</option>
</select>
</p>

<p>
<button onclick="botao_clicado(this)">Produtos</button>
<button onclick="botao_clicado(this)">Gabinetes</button>
<button onclick="botao_clicado(this)">Sabonete líquido</button>
<button onclick="botao_clicado(this)">Ração para cágados</button>
<button onclick="botao_clicado(this)">Buzina de calhambeque</button>
</p>

<script>
    function esse_mudou(valor) {
        muda_h2(valor);
    }

    function botao_clicado(botao) {
        /*faz algo genérico para todos os botões */

        muda_h2(botao.innerHTML);
    }

    function muda_h2(texto) {
        var h2 = document.getElementById('meuh2');
        h2.innerHTML = texto;
    }
</script>

2
  • Então mano, eu usei seu código e deu supercerto também aqui no meu problema, rsrs.. vou usar o código do Léo ali em cima mas obrigado por tirar um tempo pra me ajudar. :D
    – lougansjs
    Commented 23/06/2018 às 19:39
  • vlw flw vlw flw Commented 23/06/2018 às 19:41

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 .