4

Não sou desenvolvedor profissional, mas como em qualquer local de trabalho, o suporte técnico faz tudo.

Me foi pedido para criar uma página de suporte à equipe de vendas externa, onde possam incluir informações sobre o cliente em questão. Nesse caso, são incluídas informações simples, como: Produto X, tem no local? SIM ou NÃO. Caso sim, apareça o campo para inserir o valor praticado pelo cliente.

Eu encontrei aqui no site, uma resposta que me ajudou muito com isso. Segue o código que utilizei:

PRODUTO X: <select name="produtox" id="valor_sim" required>
        <option disabled selected value> -- Selecione uma opção -- </option>
        <option value="SIM">SIM</option>
        <option value="NÃO">NÃO</option>
      </select><br>
      
      <div id="inputOculto">
        VALOR INTENSE: <input name="produtox_valor" id="valor_sim" type="number" min="0" max="9999"><br>
      </div>

Esse é o código do JS:

<script type='text/javascript'>
  $(document).ready(function() {
    $('#inputOculto').hide();
    $('#valor_sim').change(function() {
      if ($('#valor_sim').val() == 'SIM') {
        $('#inputOculto').show();
      } else {
        $('#inputOculto').hide();
      }
    });
  });
</script>

Até aqui tudo bem, o código funciona perfeitamente. O problema, é que nos próximos produtos, isso não funciona neles, somente no primeiro. Pesquisei um pouco, e vi que poderia ser por conta do id ser o mesmo para todos, e encontrei uma resposta sobre usar a opção this nesse link, mas como não compreendo o uso e não sei se seria o caso de utilizá-lo, peço a ajuda nessa situação.

Obrigado.

2
  • 3
    +1 por ter pesquisado e posto os links da pergunta, isso é um colirio para os olhos, muito bom :) ah, aqui o suporte não mexe no código :D Commented 13/01/2021 às 17:17
  • Obrigado. Já busquei muita informação por aqui, e sempre ajudou muito ter os links. Abraços Commented 13/01/2021 às 18:56

1 Resposta 1

1

Você esta passando por esse problema justamente por usar o id, o id é funciona como um identificador único, por isso não pode repeti-lo, pois apenas a primeira ocorrência é "válida", as outras serão ignoradas.

Para isso existe o atributo class que serve para você classificar os elementos, e este atributo permite receber diversas classes(classificadores).

$(document).ready(function() {

  var produtoX = $('#produto-x');
  var produtoY = $('#produto-y');
  
  inicializarProduto(produtoX);
  inicializarProduto(produtoY);

});

function inicializarProduto(produto) {
  var valorProduto = produto.find('.valor-produto');
  valorProduto.hide();
  produto.find('.seletor-produto').change(function() {
    if (this.value == 'SIM') {
      valorProduto.show();
    } else {
      valorProduto.hide()
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="produto-x" class="linha-produto">
      Produto X:
      <select name="produto-x" class="seletor-produto" required>
        <option disabled selected value> -- Selecione uma opção -- </option>
        <option value="SIM">SIM</option>
        <option value="NÃO">NÃO</option>
      </select>

      <div class="valor-produto">
        VALOR INTENSE: 
        <input name="produto-x_valor" type="number" min="0" max="9999">
        <br/>
      </div>
    </div>

    <div id="produto-y" class="linha-produto">
      Produto Y:
      <select name="produto-y" class="seletor-produto" required>
        <option disabled selected value> -- Selecione uma opção -- </option>
        <option value="SIM">SIM</option>
        <option value="NÃO">NÃO</option>
      </select>

      <div class="valor-produto">
        VALOR INTENSE: 
        <input name="produto-y_valor" type="number" min="0" max="9999">
        <br/>
      </div>
    </div>

jQuery pode até parecer simples de fazer algo, porém conforme sua aplicação/página for crescendo, vai ficando cada vez mais difícil dar manutenção.

Eu sugiro fortemente você dar uma olhada no Vuejs pois é um framework js simples e fácil de aprender. Diferente de React ou Angular você não precisa configurar nenhum ambiente de desenvolvimento, você conseguirá iniciar seu desenvolvimento semelhante ao jQuery, importando o framework com <script src="..."></script> e abrindo outra tag <script> para poder programar sua página.

Ai você pode aos poucos aprendendo e evoluindo sua página para uma aplicação e conforme vai aprendendo vai tornando-a mais sofisticada, passando a usar ferramentas para fazer build, rotas para outras páginas e etc...

O mais importante é que você acabará escrevendo menos do que com jQuery usando componentes e tendo de escrever menos para interagir entre javascript e html para tornar sua aplicação dinâmica de verdade.

3
  • Eu entendi sobre o class, vou alterar meu código e dou retorno posteriormente. Muito obrigado desde já. Ah, Não consegui compreender o Vuejs de cara, mas vou pesquisar um pouco mais. Aprendi muito do bootstrap nesse link, e me ajudou muito a compreender os usos. Vou ver se acho algo similar do Vuejs. Commented 13/01/2021 às 19:02
  • 1
    Devia ter enviado o link da versão br ja, desculpa br.vuejs.org
    – Giovane
    Commented 13/01/2021 às 19:04
  • Deu certo a sua resposta, agora vou tratar as exceções e trabalhar com os vários itens que tenho que relacionar. Obrigado. Commented 14/01/2021 às 12:01

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 .