2

jQueryを勉強中です。私が欲しいのは、画像の src を取得し、画像のタイトルとともに、ポップアップのような固定された区画に表示することです。しかし、画像のsrcを取得するのに行き詰まっています。

.attr() を使用しようとすると、.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);
}

.screenこれにより、クリックされた要素が jQuery でラップされ、そのimg中の要素が検索されます。もう少し明確だと思いますが、これは単なる好みの問題です。

于 2013-10-23T20:23:23.027 に答える
0

これは、in の値が のクリック関数のの値と同じthisではないためです。関数内で呼び出して の値を確認することで、それをテストできます。displaythis.screenconsole.log(this);displaythis

thisonの値を渡したい場合は、 call関数を次のように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 に答える