Atribut jQuery Grab untuk item dalam array

Saya memiliki satu set div yang dibuat secara dinamis melalui php, div tersebut memiliki atribut yang disebut 'data-image-url' yang menyimpan url gambar untuk galeri pop-up. Ketika saya mengklik div, sebuah overlay muncul bersama dengan galeri 3 gambar untuk div itu (mirip dengan lightbox).

Saya telah membuat overlay dan div untuk memuat gambar galeri terkait (hanya akan ada 3). Namun, saya tidak tahu cara mengambil nilai dari atribut 'data-image-url' dan menjadikannya sebagai gambar latar belakang untuk div.

Inilah pekerjaan saya saat ini, keluaran php sebagai html adalah sebagai berikut:

<div id="overlay"></div>

<div class="blank christmas">
    <div data-image-url="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" class="gallery">
        <img src="img/grey.png" class="lazy" data-original="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas-135x190.jpg" alt="" />
    </div>
 </div>

<div class="blank christmas">
    <div data-image-url="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Joy.jpg" class="gallery">
        <img src="img/grey.png" class="lazy" data-original="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Joy-135x190.jpg" alt="" />
    </div>
 </div>

jadi Seperti yang Anda lihat, data-gambar-url adalah apa yang saya coba ambil di sini untuk digunakan sebagai gambar latar belakang div saya di pop-up.

Inilah jQuery saya sejauh ini:

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div>');
});

$main_img_url = $('.gallery').attr('data-image-url').html();
$('.main_image').css("background-image", $main_img_url);

Dan JsFiddle untuk menunjukkan cara kerja saya: http://jsfiddle.net/9d9sz/1/

Saya pikir masalahnya adalah html yang dihasilkan memiliki beberapa atribut "data-image-url" (karena ada beberapa gambar), tetapi saya tidak tahu bagaimana menargetkan yang spesifik untuk gambar yang saya klik.


arrays html jquery append attr
person Sam Skirrow    schedule 26.09.2013    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Coba gunakan

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div>');
    $main_img_url = $(this).attr('data-image-url');
    $('.main_image').css("background-image", "url('" + $main_img_url + "')")
});

http://jsfiddle.net/9d9sz/2/

person ʞɹᴉʞ ǝʌɐp    schedule 26.09.2013
comment
brilian - Aku tahu itu ada hubungannya dengan 'ini' hanya saja aku masih belum bisa memikirkannya! Terima kasih - person Sam Skirrow; 26.09.2013