คุณลักษณะ jQuery Grab สำหรับรายการในอาร์เรย์

ฉันมีชุด div ที่สร้างขึ้นแบบไดนามิกผ่าน php ส่วน div มีแอตทริบิวต์ที่เรียกว่า 'data-image-url' ซึ่งเก็บ URL รูปภาพสำหรับแกลเลอรีป๊อปอัป เมื่อฉันคลิก div ภาพซ้อนทับจะปรากฏขึ้นพร้อมกับแกลเลอรีภาพ 3 ภาพสำหรับ div นั้น (คล้ายกับไลท์บ็อกซ์)

ฉันได้สร้างภาพซ้อนทับและ div เพื่อให้มีภาพแกลเลอรีที่เกี่ยวข้อง (จะมีเพียง 3 ภาพเท่านั้น) อย่างไรก็ตาม ฉันไม่สามารถทราบวิธีดึงค่าจากแอตทริบิวต์ 'data-image-url' และกำหนดให้เป็นภาพพื้นหลังสำหรับ div

นี่คือการทำงานปัจจุบันของฉัน php ที่ส่งออกเป็น html มีดังนี้:

<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>

อย่างที่คุณเห็น data-image-url คือสิ่งที่ฉันพยายามหยิบมาที่นี่เพื่อใช้เป็นภาพพื้นหลังของ div ของฉันในป๊อปอัป

นี่คือ jQuery ของฉันจนถึงตอนนี้:

$('.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);

และ JsFiddle เพื่อแสดงผลงานของฉัน: http://jsfiddle.net/9d9sz/1/

ฉันคิดว่าปัญหาคือ html ที่ส่งออกมีแอตทริบิวต์ "data-image-url" หลายรายการ (เนื่องจากมีรูปภาพหลายรูป) แต่ฉันไม่รู้ว่าจะกำหนดเป้าหมายเฉพาะสำหรับรูปภาพที่ฉันคลิกได้อย่างไร


arrays html jquery append attr
person Sam Skirrow    schedule 26.09.2013    source แหล่งที่มา

คำตอบ (1)


arrow_upward
3
arrow_downward

ลองใช้

$('.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
ยอดเยี่ยม - ฉันรู้ว่ามันเป็นเรื่องที่เกี่ยวข้องกับ 'สิ่งนี้' แค่ยังไม่เข้าใจเลย! ขอบคุณ - person Sam Skirrow; 26.09.2013