Galera, bom dia! Tudo bem ?!
Eu estou passando por um problema com jQuery e HTML na qual eu to tentando add os elementos quando o clique do mouse é fora de certo campo[input]. Esse procedimento funciona normalmente. Porém, a clicar no campo e clicar fora outra vez ele add os mesmo elementos ao invés de substitui-los. Meu problema é que eu não estou conseguindo bolar uma solução para corrigir isso.
Meu código abaixo:
// Functions
function formulaSEO(cpc, cpt) { // Function para medir a densidade de wordskeys no conteúdo
/*
* cpc -> contaPalavraChave
* cpt -> contaPalavrasTotais
* fdd -> formulaDeDensidade
*/
fdd = (cpc / cpt) * 100;
fdd = fdd.toFixed(2); // 2 casas deciais para cima
return fdd;
}
/*
*
*/
// Principal
$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusout(function() { // Alterar para o ID do campo
/*
* Configuração para Título
*/
var titulo = $("#f_titulo_seo").val(); // Alterar para o ID do campo
var array = titulo.split(' ');
var palavraChave = $("#f_keywords").val(); // Alterar para o ID do campo
if (palavraChave != "") {
if (array.indexOf(palavraChave) == 0) {
$('#bom').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-green"></div> A palavra-chave em foco aparece logo no inicio do título.</li></ul>');
$("li.analise-titulo").addClass("block");
$("#atencao #titulo-seo, #urgente #titulo-seo").remove();
} else if (array.indexOf(palavraChave) == -1) {
$('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Essa palavra chave não existe no titulo.</li></ul>');
$("li.analise-titulo").addClass("block");
$("#atencao #titulo-seo, #bom #titulo-seo").remove();
} else {
$('#atencao').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-orange"></div> O título da página contém a palavra-chave em foco, mas ela não parece estar no começo; tente mudar sua posição para o início.</li></ul>');
$("li.analise-titulo").addClass("block");
$("#bom #titulo-seo, #urgente #titulo-seo").remove();
}
} else {
$('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Nenhuma palavra-chave em foco foi definida para essa página. Se você não definir a palavra-chave em foco, não será possível calcular a pontuação.</li></ul>');
$("li.analise-titulo").addClass("block");
$("#atencao #titulo-seo, #bom #titulo-seo").remove();
}
/*
* Configuração para Conteúdo
*/
var conteudo = editor.getData(); // Pega os valor do textarea CKEDITOR
var arrayExterno = conteudo.split(/<p.*?>(.*?)<\/p.*?>/g); // Coloca cada paragrafo dentro de um array
// Pega cada palavra dentro do paragrafo e coloca em um array interno ao array anterior
var arrayInterno = [];
for (i = 0; i < arrayExterno.length; i++) {
arrayInterno.push(arrayExterno[i].split(" "));
}
numPalavrasRecomendadas = 300;
contPalavrasTotais = 0;
for (i = 0; i < arrayExterno.length; i++) {
for (j = 0; j < arrayInterno.length; j++) {
contPalavrasTotais += 1;
}
}
if (contPalavrasTotais >= numPalavrasRecomendadas) {
$('#bom').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-green"></div> O texto contém ' + contPalavrasTotais + ' palavras. Isso é maior ou igual ao mínimo recomendado de ' + numPalavrasRecomendadas + ' palavras.</li></ul>');
$("li.analise-quant-palavras").addClass("block");
$("#urgente #quant-palavras").remove();
} else {
$('#urgente').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-red"></div>O texto contém ' + contPalavrasTotais + ' palavras. Isso está muito abaixo do minimo recomendado de ' + numPalavrasRecomendadas + ' palavras. Adicione mais conteúdo que seja relevante para o tópico.</li></ul>');
$("li.analise-quant-palavras").addClass("block");
$("#bom #quant-palavras").remove();
}
// Quantidade de vezes que a palavra chave foi encontrada
contPalavrasChaves = 0;
for (i = 0; i < arrayExterno.length; i++) {
for (j = 0; j < arrayInterno[i].length; j++) {
if (arrayInterno[i][j] == palavraChave || arrayInterno[i][j] == palavraChave + '?' || arrayInterno[i][j] == palavraChave + '!' || arrayInterno[i][j] == palavraChave + '.' ||
arrayInterno[i][j] == palavraChave + ',' || arrayInterno[i][j] == palavraChave + ':' || arrayInterno[i][j] == palavraChave + ';') {
contPalavrasChaves += 1;
}
}
}
var resultado = formulaSEO(contPalavrasChaves, contPalavrasTotais);
if (resultado >= 1 && resultado < 3) {
$('#bom').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-green"></div> A densidade de palavras-chave é ' + resultado + '% , o que é ótimo, a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
$("li.analise-densidade").addClass("block");
$("#urgente #densidade").remove();
} else {
$('#urgente').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-red"></div> A densidade da palavra-chave é de ' + resultado + '% , o que é muito baixo; a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
$("li.analise-densidade").addClass("block");
$("#bom #densidade").remove();
}
/**
* Configuração para meta-descrição
*/
var metaDescricao = $("#f_resumo_seo").val().trim();
array = metaDescricao.split(" ");
if (metaDescricao != "") {
if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
array.indexOf(palavraChave + ';') >= 0) {
$('#bom').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-green"></div> A meta-descrição contém a palavra-chave em foco.</li></ul>');
$("li.analise-meta-descricao").addClass("block");
$("#urgente #meta-descricao").remove();
} else if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
array.indexOf(palavraChave + ';') == -1) {
$('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Uma meta-descrição foi definida, mas ela não contém a palavra-chave em foco.</li></ul>');
$("li.analise-meta-descricao").addClass("block");
$("#bom #meta-descricao").remove();
}
} else {
$('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Nenhuma meta-descrição foi definida. Os mecanismos de busca mostrarão trechos da página em seu lugar.</li></ul>');
$("li.analise-meta-descricao").addClass("block");
$("#bom #meta-descricao").remove();
}
// Tamanho de string contidas da MD
var metaDescricao = $("#f_resumo_seo").val().trim();
quantString = metaDescricao.split("");
if (quantString.length >= 120) {
if (quantString.length < 158) {
$('#bom').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-green"></div> A meta descrição tem um bom tamanho.</li></ul>');
$("li.analise-tam-meta-descricao").addClass("block");
$("#atencao #tam-meta-descricao").remove();
} else {
$('#atencao').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-orange"></div> A meta descrição foi definida, porém não está de acordo com as regras de SEO, que é entre 120 e 158 caracteres.</li></ul>');
$("li.analise-tam-meta-descricao").addClass("block");
$("#bom #tam-meta-descricao").remove();
}
}
/**
* Configuração para SLUG
*/
var slug = $("#f_slug").val();
var arraySlug = slug.split("-");
contWordInURL = 0
for (i = 0; i < arraySlug.length; i++) {
if (arraySlug[i] == palavraChave) {
contWordInURL += 1
}
}
if (contWordInURL >= 1) {
$('#bom').append('<ul id="slug"><li class="analise-slug"><div class="circle-green"></div> A palavra-chave em foco aparece no URL desta página.</li></ul>');
$("li.analise-slug").addClass("block");
$("#atencao #slug").remove();
} else {
$('#atencao').append('<ul id="slug"><li class="analise-slug"><div class="circle-orange"></div> A palavra-chave em foco não aparece no URL dessa página. Se decidir renomear esse URL certifique-se que o URL antigo tenha um redirecionamento 301 para o novo!</li></ul>');
$("li.analise-slug").addClass("block");
$("#bom #slug").remove();
}
// Tamanho contido no slug
var arrayTamSlug = slug.split("");
if (arrayTamSlug.length <= 80) {
$('#bom').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-green"></div> O comprimento do SLUG da página está excelente.</li></ul>');
$("li.analise-tam-slug").addClass("block");
$("#atencao #tam-slug").remove();
} else {
$('#atencao').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-orange"></div> O slug desta página é um pouco longo, considere encurtá-lo.</li></ul>');
$("li.analise-tam-slug").addClass("block");
$("#bom #tam-slug").remove();
}
/*$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusin(function(){
$("#bom, #atencao, #urgente").remove();
});*/
});
* {
padding: 0;
margin: 0;
}
.row {
margin-top: 50px;
}
.input-group {
margin-top: 30px;
margin-bottom: 20px;
}
.seo-config {
margin: 20px auto;
}
#titulo-seo,
#quant-palavras,
#densidade,
#meta-descricao,
#tam-meta-descricao,
#slug,
#tam-slug {
margin-top: 10px;
}
.analise-titulo,
.analise-quant-palavras,
.analise-densidade,
.analise-meta-descricao,
.analise-tam-meta-descricao,
.analise-slug,
.analise-tam-slug {
display: none;
margin: 0 8px 0 11px;
flex: 1 1 auto;
box-sizing: border-box;
font-size: 13px;
line-height: 1.5;
}
ul li {
margin-bottom: 1rem!important;
margin-top: 10px!important;
}
.block {
display: block!important;
}
.ck.ck-reset.ck-editor.ck-rounded-corners {
width: 100%;
}
.circle-green {
display: inline-block;
border-radius: 100%;
width: 13px;
height: 13px;
background-color: #7AD03A;
}
.circle-orange {
display: inline-block;
border-radius: 100%;
width: 13px;
height: 13px;
background-color: #EE7C1B;
}
.circle-red {
display: inline-block;
border-radius: 100%;
width: 13px;
height: 13px;
background-color: #DC3232;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Projeto SEO</title>
<!-- Main -->
<link rel="stylesheet" href="style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Título</span>
</div>
<input type="text" id="f_titulo_seo" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" value="Os 5 principais tipos de vendas do mercado">
</div>
<div class="input-group input-group-lg">
<textarea name="content" id="f_conteudo">
</textarea>
</div>
<div class="seo-config">
<h2>SEO</h2>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Palavra Chave em foco</span>
</div>
<input type="text" id="f_keywords" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>
<p>Rsultado de boas práticas: </p>
<div id="urgente"></div>
<div id="atencao"></div>
<div id="bom"></div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Meta-descrição</span>
</div>
<textarea class="form-control" id="f_resumo_seo" aria-label="Meta-descrição">Você sabia que existem diferentes tipos de vendas? Cada uma delas é indicada para um modelo de negócio e, se bem aplicada, pode facilitar a manutenção dos lucros.</textarea>
</div>
<label for="f_slug">SLUG</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3"> https://meublog.com/</span>
</div>
<input type="text" class="form-control" id="f_slug" aria-describedby="basic-addon3" value="os-5-principais-tipos-de-vendas-do-mercado">
</div>
</div>
</div>
<footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- CkEditor -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
<script src="scripts.js"></script>
<script>
let editor;
ClassicEditor
.create(document.querySelector('#f_conteudo'))
.then(newEditor => {
editor = newEditor;
})
.catch(error => {
console.error(error);
});
</script>
</footer>
</body>
</html>
Desde já agradecido pela ajuda da galera!