На сайте три картинки.
<img src = "images/kep1.jpg" class = "kep1">
<img src = "images/kep2.jpg" class = "kep2">
<img src = "images/kep4.jpg" class = "kep4">
Щелкните функцию, чтобы увеличивать по одной странице в середине страницы страницы, но я сохраню необходимые данные в переменной.
var pos;
var t;
var h;
var pic;
$("img").click(function(){
pos = $(this).css("position");
pic = $(this).attr("class");
t = $(this).css("top");
h = $(this).css("height");
$(".szurkeDiv").show();
$(this).animate(
{
"position" : "fixed",
"top" : "50%",
"left" : "50%",
"margin-top" : "-300px",
"margin-left" : "-400px",
"width" : "800px",
"height" : "600px"
}, 1000, function(){}
);
});
Затем я хочу, чтобы вы щелкнули изображение в середине страницы, чтобы вернуть его в исходное положение. Я хотел бы получить доступ к переменной PIC, но не смог.
$(pic).animate(
{
"position" : pos,
"width" : "150px",
"margin-top" : "0px",
"margin-left" : "0px",
"left" : "5px",
"height" : h,
"top" : t
}, 1000, function(){}
);
Как я могу это сделать, обратитесь к переменной PIC?
Спасибо за помощь!!
Я только учусь этому. Это был домашний урок! :-)

попробуйте использовать $ ('.' + pic) вместо $ (pic).
См. https://jsfiddle.net/g15v3c4z/
var pic = $('p').attr("class");
$('.' + pic).html('world!');
Используйте простой CSS для анимации:
var img = $("img")
img.on("click", function(){
$(this).toggleClass("zoom");
})img {
transition: all 0.5s ease;
}
.zoom {
transform:scale(2);
transform-origin: 0 0;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
<img src = "https://via.placeholder.com/350" alt = "">
<img src = "https://via.placeholder.com/350" alt = "">
<img src = "https://via.placeholder.com/350" alt = "">
</div>
Возможный дубликат jquery выбирает элементы по классу, используя имя из переменной