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

【问题标题】：jquery - Undefined src when using attr() of imagejquery - 使用图像的attr（）时未定义的src
【发布时间】：2013-10-23 20:19:01
【问题描述】：

刚刚学习 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);
}

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：

谢谢它的工作！如何传递此 src 并将其显示在 div (.pic) 中？我已经添加了$('.pic').show();，但我不知道如何传递 src 以在 .pic div 中显示图像及其描述。
这很简单：这篇文章应该对你有帮助：stackoverflow.com/questions/8013792/…

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

display 函数中的this 指的是您的匿名函数，而不是元素。你不需要包装它。 $('.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 元素。我认为它更清楚一点，但这只是一个偏好。

【讨论】：

即和"img", this一样

【解决方案4】：

这是因为display中this的值与.screen的点击函数中this的值不一样。您可以通过在display 函数中调用console.log(this); 来对此进行测试，以查看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);

【讨论】：

【解决方案5】：

这是因为你的 src 是未定义的。

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

【讨论】：