У меня в футере 5 картинок. Я хочу, чтобы при нажатии на них посредине экрана сверху высвечивалась информация. К каждой картинка отдельная. Но при нажатии на них ничего не происходит, что делать? Вот мой код:
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
text-align: center;
}
.footer {
flex: 0 0 auto;
text-align: center;
}
img {
border: 1px solid blue;
height: 50px;
width: 70px;
display: inline-block;
}
#desc {
text-align: center;
}
.image_cart {
display: block;
}
.image_cart img {
width: 100%;
max-width: 150px;
height: 100%;
object-fit: cover;
}
.image_cart:not(.active) .description {
display: none;
font-size: x-large;
text-align: center;
}
.hidden {
display: none;
}
#somedesc {
font-size: x-large;
text-align: center;
}
}
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.image_cart').on('click', function() {
$(this).toggleClass('active');
if ( $(this).hasClass("active") )
$("#desc").html($(this).find(".description").html());
else
$("#desc").html("");
});
$('body').css('background', 'url(file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg )')
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="desc"></div>
<div class="wrapper">
<div class="content">Чтооо?</div>
<div class="footer">
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg" alt />
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" alt />
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" alt />
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" alt />
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" alt />
</div>
</div>