javascript - jquery - 使用图像的 attr() 时未定义的 src

Question

刚刚学习jQuery。我想要的是抓取图像的 src 并将其显示在固定的分区中，有点像弹出窗口，带有图像的标题。但我一直坚持获取图像的 src。

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

HTML:

            <div id="album">

                <div class="pic">

                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>
                <span class="clear_left"></span>

            </div>

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("The souce of the image is " + source);
}

Answer 1

问题是，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);
}

Working demo