2

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

5 回答 5

3

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

工作演示

于 2013-10-23T20:22:24.933 回答
1

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

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

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

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

于 2013-10-23T20:24:35.207 回答
0

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元素。我认为它更清楚一点，但这只是一个偏好。

于 2013-10-23T20:23:23.027 回答
0

这是因为thisin的值与 click 函数中 fordisplay的值不一样。您可以通过在函数内调用来查看值是什么来对此进行测试。this.screenconsole.log(this);displaythis

如果您想将 on 的值传递this给display您可以使用如下调用函数：

$(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);
于 2013-10-23T20:28:10.883 回答
0

这是因为您的 src 未定义。

function display() {
    var source = $("img",this).attr("src", "images/okay.jpg");
    alert("The souce of the image is " + source);
}
于 2015-07-27T19:25:02.730 回答