Question

网站上有三张照片。

<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变量？

感谢您的帮助！

Answer 1

使用$（'。'+ pic）代替$（pic）尝试。

请参见https://jsfiddle.net/g15v3c4z/

var pic = $('p').attr("class");

$('.' + pic).html('world!');

Answer 2

对动画使用纯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变量中的类名

2 个答案: