0

Estou carregando dados de uma api externa com json e jquery,a cada solicitação ajax uma div com a classe item,uma div com a classe more_info e um botão ver mais, que carrega o resto dos dados, e as divs criadas recebem os dados do json. A partir da linha 28 o jquery esconde a div more_info, e o botão criado com a classe bt_ver_mais recebe a função toggle, para abrir o resto da informação na mesma tela. O problema é que quando eu clico em um dos botões gerados para ver mais, todos os botões executam a função toggle, abrindo o resto das informações de todas as divs,sendo óbvio, já que todos tem a mesma classe, mas eu não quero que isso aconteça, eu quero que ao clicar em botão, ele abra a div .more_info da div dele, e não de todas as outras divs

//Carrega dados de um arquivo json 
var elemento;
  $(document).on('click','#bt_prosseguir', function(){
    $.getJSON('https://upvagasweb.000webhostapp.com/api_upvagas/php_json_access/access_json_aparecida.php', function(result){
        elemento = "<div class='list radius white'>";
        $.each(result, function(i, valor){
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src='"+valor.logo_empresa+"'>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>"+valor.setor+"</strong></h2>";
        elemento += "<p style='margin-left:40%;'>"+valor.empresa+"</p>";
        elemento += "<p style='margin-left:40%;'> Por "+valor.vinculo+"</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>"+valor.cidade+" - SP</p>"; 
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>"+valor.beneficios+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>"+valor.remuneracao+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>"+valor.nivel_estagio+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>"+valor.processo_seletivo+"</p>";
        elemento += "</div>";
        //elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";   
        });
        $('#feed_vagas').html(elemento);

        //esconde a div more_info
          $('.more_info').hide();
          $('.bt_ver_mais').click( function(){     
            $('.more_info').toggle(); 
        });
    });
});


/*$(document).on('deviceready', function(){
    load_feed();
 });*/

1 Resposta 1

0

Altere o evento click para buscar apenas a div .more_info que possui o mesmo ancestral com a classe .item do .bt_ver_mais clicado:

$('.bt_ver_mais').click( function(){
  $(this) // elemento clicado
  .closest('div.item') // ancestral comum
  .find('.more_info') // busca o elemento que será exibido
  .toggle(); // exibe/oculta o elemento
});

Exemplo:

//Carrega dados de um arquivo json 
var elemento;
$(document).on('click','#bt_prosseguir', function(){
     elemento = "<div class='list radius white'>";
     for(var x=0; x<5; x++){
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src=''>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>10,00</strong></h2>";
        elemento += "<p style='margin-left:40%;'>20,00</p>";
        elemento += "<p style='margin-left:40%;'> Por 5,00</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>SP - SP</p>"; 
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>30,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>40,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>50,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>60,00</p>";
        elemento += "</div>";
        //elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";   
     }
     $('#feed_vagas').html(elemento);

     //esconde a div more_info
       $('.more_info').hide();
       $('.bt_ver_mais').click( function(){
         $(this)
         .closest("div.item").find(".more_info")
         .toggle();
      });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bt_prosseguir">Prosseguir</button>
<div id="feed_vagas"></div>

1
  • 1
    Muito obrigado Sam, resolveu meu problema de primeira, eu estava quebrando demais a cabeça com isso kkk, tentei até o metódo eq() do jquery, valeu! Commented 24/11/2018 às 22:13

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 .