I'm developing a website and needed a help on a question:
I am making 6 cards with some titles and when I click on a card, it makes a request Ajax fetches some information from the service just below the specific card. This is just a brief explanation.
The deal is that I want to use Ajax , Success , a CSS modification, and I can not think of a good way to inform the element that should be modified
First, follow the HTML and 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 I'm using to fetch additional information there in the database and return it asynchronously to the 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'}); is what I need to know. The question is: When I click on a card and the result is returned, I want the < background # 663399 but only when it is active, but how can I specify this for exactly that card, knowing that when I click on the element, it is the < to > that is identified and enabled. How do I get there?
The link to the page is the case if you want to look at the entire project in the entire context: link
Needing other information just enter below and I think I've gone through all the important info. Thanks to all who help.