jquery - 使用attr()方法时，当使用image的src属性时出现undefined

27 浏览
0 Comments

jquery - 使用attr()方法时，当使用image的src属性时出现undefined

刚学习jQuery。我想要的是获取图片的src并在一个固定的区域显示，类似于弹出窗口，同时显示图片的标题。但是我在获取图片的src这一步卡住了。

当我尝试使用.attr()时，它给我返回了undefined。

HTML:

            
                    
照片1

                    
                    
这是一个描述
                    
照片1

                    
                    
这是一个描述

css:

.screen {
    border: 1px solid green;
    margin: 10px auto;
    float: left;
    cursor:pointer
}
.image {
    width: 300px;
}
.title {
    font-size: 30px;
}
.description {
    font-size: 25px;
}
.pic {
    width: 600px;
    position:fixed;
}

js:

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display();
    });
});
function display() {
    var source = $("img",this).attr("src");
    alert("图片的源是" + source);
}

0

3 答案

0 Comments

问题的原因是，display()方法没有点击元素的上下文。因此它显示为undefined。解决方法如下：

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display($(this));
    });
});
function display($this) {
    var source = $("img", $this).attr("src");
    alert("The souce of the image is " + source);
}

感谢，它起作用了！我该如何传递这个src并在div(.pic)中显示它？我已经添加了$('.pic').show();，但不知道如何传递src以显示图像及其描述在.pic div中。

这很简单：这篇帖子应该对你有帮助：stackoverflow.com/questions/8013792/…

0
0 Comments

问题出现的原因是在调用函数时，将其包装在另一个匿名函数中导致无法正确传递参数。

解决方法是直接调用函数，而不是将其包装在另一个匿名函数中。具体代码如下：

$(".screen").click(display);

0
0 Comments

问题的原因是在display函数中，this指向的是匿名函数，而不是元素本身。解决方法是在调用display函数时，使用$('.screen').click(display)来确保this指向.screen元素。另外，可以将display函数改写为：

function display() {
    var source = $(this).find('img').attr('src');
    alert("The source of the image is " + source);
}

这样可以将jQuery包裹在被点击的.screen元素上，并在其中查找img元素。这样写更加清晰，但只是个人偏好。这与"img", this的写法是等价的。

0