1


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.

1 Resposta 1

1

Como o objetivo é selecionar apenas a tag i, no seu success você pode fazer assim:

$('a[data-consult-id]').click(function(){  
    //use isso para zerar o background dos outros, deixano    selecionado apenas o que você clicou
    $('a[data-consult-id] .element div').children('i').css("background-color", "");
    
    //mudando a cor
    $('.element div',this).children('i').css("background-color", "#663399");
    
    //Para ter certeza que é o icone que esta sendo selecionado
    console.log($('.element div',this).children('i').html());
})
.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%;
                }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 data-consult-id="2">
                    <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>

8
  • Opa @Jorge.M, cara eu fiz como mostrou ali, mas mesmo assim não está funcionando. É por conta do Ajax sendo feito. :/ Eu tirei a chamada e ele funcionou perfeitamente, será que teria uma forma de resolver isso. Eu não sei na vdd pq nao funciona estando dentro de um success, já que as especificações estão todas corretas :c
    – lougansjs
    Commented 29/11/2018 às 16:02
  • Mano, eu consegui fazer adaptando algumas coisas só, isto é, eu coloquei fora do success, antes da requisição e troquei o .css por um .toggleClass que resolve bastante o problema. Não solucionou totalmente o problema, mas já ajudou muito. Você sabe porque não funcionou dentro do Success? é algum problema com o children na hora de encontrar o elemento?
    – lougansjs
    Commented 29/11/2018 às 17:45
  • Mesmo assim mano, vlw, vou marcaar a sua como correta. Aguardo retorno :)
    – lougansjs
    Commented 29/11/2018 às 17:46
  • 1
    Creio que seja por conta do this. Declare uma variável no início, abaixo da sua consult_id assim: var obj = $(this) e ao invés de usar o this, usa assim: $('.element div',obj).children('i').css("background-color", "#663399"); Commented 29/11/2018 às 19:24
  • Legal, nossa... Valeu mesmo mano. Eu preciso de mais uma ajudinha. Se quiser responder essa rsrs vai me ajudar bastante: Tipo, se acessar o site que coloquei na pergunta, vai ter os cards e quando clico sobre um deles, ele realiza a requisição e aplica a mudança de cor quando ativo, para isso usei o slideToggle() no retorno da requisição (success) e junto com isso uma funcao para modificar a tag < i > adicionando uma classe. Mas quando eu seleciono outro card tendo um já aberto, ele fecha o resultado ( (response).html(data) ) mas mantem as classes inseridas com o toggleClass em ambos os cards.
    – lougansjs
    Commented 30/11/2018 às 14:19

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 .