Eu estou num desenvolvimento de um site e precisava de um help numa questão:
Eu estou fazendo 6 cards com alguns títulos e quando eu clico sobre um card, ele faz uma requisição Ajax busca algumas informações do serviço logo abaixo do card especifico. Esse é só uma breve explicação.
O negócio é que quero usar dentro dessa requisição Ajax, no Success , uma modificação de CSS e não estou conseguindo pensar em uma boa forma de informar o elemento que deverá ser modificado
Primeiro, segue o código HTML + CSS que usei para desenvolver os cards:
<style>
.element {
box-shadow: 0 8px 50px -6px rgba(84,84,120,.26);
padding: 40px 20px 20px;
position: relative;
background: #fff;
cursor: pointer;
}
.element h4 {
color: #3c9890;
font-size: 20px
}
.element:hover div i{
background: rebeccapurple !important;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element:hover h4{
color: #9e6bd2 !important;
transition: all .5s ease-in-out;
}
.ti-icone {
background: #35b1a6;
width: 80px;
height: 80px;
display: inline-block;
line-height: 80px;
text-align: center;
color: #fff;
font-size: 28px;
border-radius: 50%;
}
</style>
<div class="col-lg-4 col-md-6 mt-5" id="consultores-id">
<a data-consult-id="1" href="#consultores-id" class="">
<div class="text-center element">
<div style="margin-bottom: 25px;">
<i class="ti-package ti-icone"></i>
</div>
<h4>
Logística
</h4>
</div> <!-- feature -->
</a>
</div>
<div class="col-lg-4 col-md-6 mt-5">
<a>
<div class="text-center element">
<div style="margin-bottom: 25px;">
<i class="ti-headphone-alt ti-icone"></i>
</div>
<h4>
Comercial
</h4>
</div> <!-- feature -->
</a>
</div>
E aqui vai o script Javascript que eu estou usando para buscar informações adicionais lá no banco de dados e voltar ela de forma assincrona no response-content:
<script>
$("[data-consult-id]").click(function () {
let consult_id = $(this).attr("data-consult-id");
let response = $(".response-content");
//response.html("<div class='text-center'><i class='fa fas fa-cog fa-spin fa-5x' style='margin-top: 1rem'></i>");
setTimeout(function(){
$.ajax({
url: "response.php?consult_id=" + consult_id,
type: 'GET',
success: function (data) {
$(response).slideToggle('fast').html(data);
}
});
}, 200);
});
$("[data-consult2-id]").click(function () {
let consult2_id = $(this).attr("data-consult2-id");
let response = $(".response-content2");
//response.html("<div class='text-center'><i class='fa fas fa-cog fa-spin fa-5x' style='margin-top: 1rem'></i>");
setTimeout(function(){
$.ajax({
url: "response.php?consult_id=" + consult2_id,
type: 'GET',
success: function (data) {
$(response).slideToggle('fast').html(data);
$().css({backgroundColor: '#663399'});
}
});
}, 200);
});
</script>
Então, a linha $().css({backgroundColor: '#663399'}); é o que eu preciso saber. A pergunta é: Quando eu clicar em um card e for retornado o resultado, eu quero que a tag < i > obtenha um background #663399 mas apenas quando estiver ativo, mas como posso especificar isso para exatamente aquele card, sabendo que quando eu clico sobre o elemento, é a tag < a > que é identificada e ativada. Como passo isso ali?
O link da página é esse caso queiram olhar o projeto todo, no contexto inteiro: http://hecato.com/sistema/info/consultores.php
Precisando de outras informações é só informar abaixo e acho que passei todas as info importantes. Obrigado aos que ajudarem.