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

Answer 2

不要用另一个匿名函数包装你的函数调用：

演示：http://jsfiddle.net/9KgSQ/

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

现在将this传递给您的函数。

Answer 3

this函数中的

display指的是您的匿名函数，而不是元素。你不需要包装它。 $('.screen').click(display)将确保this引用.screen元素。

我也会更改显示来执行此操作：

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

这将jQuery包围在被点击的.screen元素周围，并在其中找到img元素。我认为它更清楚一点，但这只是一种偏好。

Answer 4

这是因为this中display的值与this的点击函数中.screen的值不同。您可以通过调用console.log(this);函数中的display来查看this的值，以便对其进行测试。

如果您想将this的值传递给display，可以使用call函数，如下所示：

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display.call(this);
    });
});

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

或者你可以完全摆脱匿名函数并直接传递display：

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

Answer 5

这是因为你的src未定义。

function display() {
    var source = $("img",this).attr("src", "images/okay.jpg");
    alert("The souce of the image is " + source);
}

jquery - 使用图像的attr（）时未定义的src

5 个答案: