0

Tenho o seguinte código que chama todas as categorias para um menu. Elas são criadas dinamicamente:

function retornaCategorias (){
    var container = $("#navmenu");
    var container1 = $(".top-nav");
    var listaCategorias = container.find(".mostracategoria");
    var listaCartegoriasInternas = container1.find(".menuinternas");
    var mostraCategorias = "";
    var mostraCategoriasInternas = "";
    var dadosHtml = "";
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'http://api.teste/store/categorias',
      success: function(retorno)
      {

        retorno.data.forEach(function(item)
        {
          mostraCategorias += "<li><a id='" + item.categoria_id + "' class='btn-categoria-selecionada' title='" + item.nome  + "' href='#'>" + item.nome + "</a></li>";
          mostraCategoriasInternas += "<li class='dropdown1'><a id='" + item.categoria_id +"' href='=index.php?id=" + item.categoria_id + "' title='" + item.nome + "'>" + item.nome + "</a><li>";

          listaCategorias.html(mostraCategorias);
          listaCartegoriasInternas.html(mostraCategoriasInternas);
          // ativa o primeiro elemento da função
          $("ul.mostracategoria li:first-child").addClass("active-button");
        //  $(".item-selecionado").attr('id',mostraCategorias);

        })
      },
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        alert("Status do Servidor: " + textStatus);
        alert("Erro do Servidor: " + errorThrown);
      }
    });
} // FINAL DA LISTA DE CATEGORIAS

Ok eu tenho que criar as páginas para cada categoria igual a uma aba:

function montarPaginas ()
{
    var container = $(".item-selecionado");
    var mostraPaginas = "";
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'http://api.teste/store/categorias',
      success: function(retorno)
      {

        retorno.data.forEach(function(item)
        {

          mostraPaginas += "<div id='" + item.nome + "' class='pagina-selecionada nao-ativa'>" + item.nome + "</div>";
          container.html(mostraPaginas);
          $(".item-selecionado div:nth-child(1)").addClass('div-ativa');

        })
      },
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        alert("Status do Servidor: " + textStatus);
        alert("Erro do Servidor: " + errorThrown);
      }
    });
}

Para melhor entendimento segue uma imagem: Categorias do menu

Até aqui tudo bem, o problema é quando ele é criado dinamicamente, quando eu clicar no menu refrigerantes ele tem que mudar a div abaixo de lanches para refrigerantes. Para isso na DIV .item-selecionado ele tem que retirar a classe que está div-ativa para por a classe .div-nao-ativa, para que o item desapareça e o próximo item apareça que é o refrigerante.

O botão abaixo eu tenho o código do botão que é na hora de clicar na categoria:

$(document).on("click",".btn-categoria-selecionada",function()
{
      $("ul.mostracategoria li:first-child").removeClass("active-button");
      $(this).addClass("active-button");
      var idcategoria = $(this).parent().find(".btn-categoria-selecionada").attr("id");
      var nomecategoria = $(this).parent().find(".btn-categoria-selecionada").attr("title");
      var indice = $(this).parent.index();
      indice++;

      $(".item-selecionado div").removeClass('div-ativa');
      $(".item-selecionado div:nth-child("+indice+")").addClass('div-ativa');
});

1 Resposta 1

0

Já resolvi, o problema eram os parênteses, não há parênteses depois do parent

Errado:

var indice = $(this).parent().index();

Certo:

var indice = $(this).parent.index();
0

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 .