1

Eu estou tentando usar esse script... mas quando eu adiciono o console me retorna esse erro:

Error: Syntax error, unrecognized expression: "#listagemProdutos .vitrine-0 > ul li.listagem-linha > .flex-viewport ul"

Qual o problema? Quando eu removo tudo e deixo apenas aspas duplas antes e depois do seletor... ele passa! Mas dessa forma eu não consigo usar a variável no seletor.

Desde já agradeço a ajuda!

$(document).ready(function () {

	if(screen.width < 768) {
		//-- Pega o valor nativo da div do produto e divide
		let larg = document.querySelector("#listagemProdutos > ul li.listagem-linha ul li").clientWidth;
		let largResult = larg / 2;

		//desativa função nativa de prev e nextve remove atributo href logo no inicio do código
		let prevNext = "#listagemProdutos > ul li.listagem-linha ul .flex-prev, #listagemProdutos > ul li.listagem-linha ul .flex-next";
        $(prevNext).off().removeAttr("href"); 

            
		//Adiciona classe unica aproveitando o indice da nodeList gerado para selecionar as vitrines de forma independente.
		//Chama a função que cria o comportamento do carrossel, passando o parametro index que será o identificador chave
		//de cada classe única.
        var arrUl = document.querySelectorAll("#listagemProdutos .produtos-carrossel");
        for (var i = 0; i < arrUl.length; i++) {
            arrUl[i].classList.add("vitrine-" + i);
            criarCarrossel(i);

        } //-- FIM DO FOR

        function criarCarrossel (ii) {
            let firsts = '\"#listagemProdutos .vitrine-' + ii + ' .flex-viewport ul li:nth-child(-n+2)\"';
            let liUlt = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha > .flex-viewport li:last-child\"";
            let liRecipiente = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha > .flex-viewport ul\"";
            let btnPrev = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul .flex-prev\"";
            let btnNext = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul .flex-next\"";
            let liAtivo = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul li.ativo\"";
//console.log(larg);
                $(firsts).addClass("ativo").css("max-width", largResult + "px");
                $(liRecipiente).attr("data-pos", "0"); //posição inicial do slide


                $(btnNext).click(function(){btn_prox();});
                $(btnPrev).click(function(){btn_ante();});


            function btn_prox (){
                        if($(liAtivo).next().size() && $(liUlt).hasClass("")){
                            let elPosition = document.querySelector(liRecipiente);
                            let posAtual = parseInt(elPosition.getAttribute("data-pos"));
                            let largResultNeg = largResult * -1;
                            let novaPos = ((largResultNeg * 2) + posAtual);
            
                
                            $(liRecipiente).attr("data-pos", novaPos + "px").css("transform", "translateX(" + novaPos + "px)");
                            $(liAtivo).removeClass("ativo").css("max-width", "100%").next().addClass("ativo").css("max-width", largResult + "px");
                        } else {
                            $(liRecipiente).attr("data-pos", "0").css("transform", "translateX(0)");
                            $(liAtivo).removeClass("ativo");
                            $(firsts).addClass("ativo").css("max-width", largResult+"px");

                        } //-- FIM DO IF CARROSSEL

            } //-- FIM DA FUNÇÃO btn_prox

        } //-- FIM DO criarCarrossel

	} //-- FIM DO IF VERIFICADOR DE TELA

}); //-- FIM DE TUDO

1 Resposta 1

2

Não precisa construir o seletor com aspas. A variável dentro de $() já passa como referência o seu próprio valor.

Por exemplo, a string da variável firsts só precisa do seletor sem delimitadores (exceto o delimitador da string). Ao colocar \" no início e no fim da variável, delimitando a string com aspas simples, é o mesmo que:

$('"seletor"')

Ou seja, o seletor fica inválido por causa das aspas duplas, resultando em erro no jQuery.

É só retirar esses \" da variável, deixando apenas as aspas simples, que fica correto o código.

1
  • Hum... não sabia. Eu nem tentei porque pensei que teria que ter o delimitador e as aspas. Muitíssimo obrigado!
    – Ivan Gomes
    Commented 2/05/2019 às 16:15

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 .