CSS customization with jQuery

Asked

Viewed 131 times

1


I’m in a site development and needed a help on a matter:

I’m making 6 cards with a few titles and when I click on a card, it makes a request Ajax looks for some service information just below the specific card. This is just a brief explanation.

The thing is I want to use it inside that requisition Ajax, in the Success , a modification of CSS and I am not able to think of a good way to inform the element that should be modified

First, follow the HTML + CSS code I used to develop the 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>

And here’s the Javascript script that I’m using to look for additional information there in the database and go back to it asynchronously in 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>

So the line $().css({backgroundColor: '#663399'}); That’s what I need to know. The question is: When I click on a card and the result is returned, I want the tag < i > get a background #663399 but only when active, but how can I specify this for exactly that card, knowing that when I click on the element, it is the tag < to > that is identified and activated. How do I pass it there?

The page link is in case you want to look at the whole project, in the whole context: http://hecato.com/sistema/info/consultores.php

Needing other information just inform below and I think I passed all the important info. Thanks to those who help.

javascript html css

1 answer

1


As the goal is to select only the tag i, in his success you can do so:

$('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>

  • Opa @Jorge. M, man I did as you showed there, but it’s still not working. It’s on account of Ajax being done. : / I took the call and it worked perfectly, would have a way to resolve it. I do not know on vdd pq does not work being inside a Success, since the specifications are all correct :c

  • Bro, I managed to do adapting a few things only, that is, I put off the Success, before the request and traded the . css for one . toggleClass that solves quite a lot of the problem. It has not fully solved the problem, but it has already helped a lot. Do you know why it didn’t work within Success? is some problem with Children when it comes to finding the element?

  • Even so brother, vlw, I will mark yours as correct. I await return :)

  • 1

    I believe it’s on account of this. Declare a variable at the beginning, below your consult_id thus: var obj = $(this) and instead of using the this, uses like this: $('.element div',obj).children('i').css("background-color", "#663399");

  • Cool, wow... thanks a lot, bro. I need a little more help. If you want to answer this rsrs will help me a lot: Type, if you go to the site I put in the question, you will have the cards and when I click on one of them, it performs the request and applies the color change when active, so I used the slideToggle() on the return of the request (Success) and along with this a function to modify the tag < i > by adding a class. But when I select another card having one already opened, it closes the result ( (Answer).html(date) but keeps the classes inserted with toggleClass in both cards.

  • @Lougansdematos, I recommend to open another question, put examples and explain what the result you want to get. I will try to help :D

  • Blz :) Thank you!

  • here is the link to the new question. I repeated some things that I found relevant and expressed much more the nature of my question, follows: https://answall.com/questions/347048/slidetoggle-configura%C3%A7%C3%A3o-em-aberto-e-fechado-jquery

Show 3 more comments

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.