ความแตกต่างระหว่างตัวเลือก iframe ของ fancyBox2 จากพาเรนต์

ฉันพยายามใช้ fancyBox2 กับองค์ประกอบภายใน iframe จากพาเรนต์ ดังนั้นฉันต้องการใช้ตัวเลือกต่อไปนี้:

$('a.lightbox', $('#modal iframe').contents()).fancybox();

แต่ตัวเลือกนี้ไม่ทำงาน ตรงกันข้าม ตัวเลือกต่อไปนี้ใช้งานได้:

$('#modal iframe').contents().find('a.lightbox').fancybox();

ตัวเลือกแรกยังทำงานร่วมกับฟังก์ชันประเภทอื่นๆ ได้ เช่น:

$('a.lightbox', $('#modal iframe').contents()).addClass('hidden');

เหตุใดจึงเป็นเช่นนี้? ความแตกต่างคืออะไร?


jquery fancybox-2
person RoyalKnight    schedule 20.03.2015    source แหล่งที่มา
comment
สำหรับสิ่งที่ฉันเห็น ความแตกต่างคือคุณไม่มีไฟล์ fancybox js อยู่ในเพจ iframe ดังนั้นจึงไม่สามารถผูกตัวเลือกนั้นเข้ากับมันได้   -  person JFK    schedule 20.03.2015
comment
ไฟล์ js จาก fancyBox2 จะรวมอยู่ในเพจ iframe ดังนั้นจึงไม่ใช่ปัญหา   -  person RoyalKnight    schedule 20.03.2015

คำตอบ (1)


arrow_upward
0
arrow_downward

ความแตกต่างคืออะไร?

นี้ :

$('a.lightbox', $('#modal iframe').contents());

... เป็นทางลัด (บางครั้งเรียกว่าชวเลข) ของสิ่งนี้:

$('#modal iframe').contents().find('a.lightbox');

... ซึ่งหมายความว่าเมื่อคุณดำเนินการอันแรก (ทางลัด) อันที่สองจะถูกเรียกใช้

ทางลัดช่วยเพิ่มความเร็วและลดความซับซ้อนในการเขียนโค้ด แต่ในแง่ของประสิทธิภาพ จะดีกว่าเสมอหากใช้วิธีการหรือฟังก์ชันโดยตรง

ตัวอย่างเช่น หากคุณมีองค์ประกอบสามรายการที่ใช้ตัวเลือกเดียวกัน เช่น:

<a class="fancybox">...</a>
<a class="fancybox">...</a>
<a class="fancybox">...</a>

สิ่งเหล่านี้จะให้ผลลัพธ์เดียวกัน:

var counter1 = $("html").find(".fancybox").length;          // returns 3
var counter2 = $(".fancybox", $("html")).length;            // returns 3
var counter3 = $(".fancybox", $("html").contents()).length; // returns 3

เหตุใดจึงเป็นเช่นนี้? (หรือทำไมมันถึงหรือไม่ทำงาน?)

ขึ้นอยู่กับปัจจัยหลายประการ เช่น ตำแหน่งและเมื่อใด (บริบท) ที่คุณกำลังจัดการ DOM แต่เมื่อทำงานกับ iframes คุณต้องแน่ใจว่า :

  • การแข่งขัน iframe เต็มแล้ว
  • คุณเชื่อมโยงเหตุการณ์เมื่อ DOM (ภายใน iframe) พร้อม

เพื่อความสอดคล้อง (และความเข้ากันได้ข้ามเบราว์เซอร์ ฉันกล้าพูดเลย) ฉันจะใช้วิธี .load() เพื่อตรวจสอบว่าเนื้อหา iframe ได้รับการโหลดอย่างสมบูรณ์ และใช้วิธี .each() เพื่อวนซ้ำผ่านตัวเลือกที่ฉันต้องการจัดการหรือ bind เหตุการณ์เช่น:

$('#modal iframe').load(function () {
    // iframe is loaded, then
    var that = $(this); // the iframe element     
    that.contents().find('a.lightbox')
    .each(function () {
        $(this) // the lightbox selector
        // bind events or manipulate elements
        .addClass("whatever")
        .fancybox();
    });
});

หรือหากคุณต้องการรูปแบบทางลัด:

$('#modal iframe').load(function () {
    // iframe is loaded, then
    var that = $(this); // the iframe element     
    $('a.lightbox', that.contents()) // shortcut format
    .each(function () {
        $(this) // the lightbox selector
        // bind events or manipulate elements
        .addClass("whatever")
        .fancybox();
    });
});

ควรทำงานได้ดีเท่าเทียมกันในทุกเบราว์เซอร์ นี่คือการสาธิต โดยใช้รูปแบบทางลัด

person JFK    schedule 20.03.2015