ขออนุญาต สอบถามการนำข้อมูลที่ได้จากการ append ไปใส่ในตัว carousel หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขออนุญาต สอบถามการนำข้อมูลที่ได้จากการ append ไปใส่ในตัว carousel หน่อยครับ

ขออนุญาต สอบถามการนำข้อมูลที่ได้จากการ append ไปใส่ในตัว carousel หน่อยครับ
ติดปัญหาเกี่ยวกับการนำข้อมูลที่ได้จากการ ลูป เเล้วนำไป append ใส่ตัวเเปล เพื่อทำเป็นตัว carousel คือมันยังไม่สามารถทำให้เป็นตัว carousel ได้ครับ รบกวนเเนะนำหน่อยครับ

function byg_replace(data) {
        var md = data;
        var i;
        var txt = '';
        for (var i = 0; i < md.mod.length; i++) {
            var mv = md.mod[i];
            var txt = '<div class="d-flex flex-row w-100 pb-0"><img src="' + mv.pic + '"> </div> 
<div class="d-flex flex-row bd-highlight mb-3"><div class="p-3 bd-highlight" style="font-size: 30px;">
<i class="fas fa-hp-icon"></i>'+ mv.engine_cc +'</div> 
<div class="p-3 bd-highlight" style="margin-left: 10px;font-size: 28px;">
<i class="fas fa-driving-icon"></i> '+ mv.drive +'</div>';
        }
        $("#div_model").append(txt);
    }
/ส่วนที่มีการดึง ข้อมูลมาจาก div_model
<div class="features-today-box owl-wrapper" >
    <div class="owl-carousel " id="div_model">

    </div>
</div>
อธิบายเพิมเติม

เมื่อผมลองเทสดูเเบบการนำข้อมูลไปแปะใส่ลงในตัว div ตัว carousel มันก็ทำงานได้ปกติดีครับ ตาตัวอย่างด้านล่าง
<div class="features-today-box owl-wrapper">
 <div class="owl-carousel owl-theme" data-num="4" style="opacity: 1; display: block;" >
    <div class="owl-wrapper-outer">
       <div class="owl-wrapper" style="width: 1500px; left: 0px; 
display: block; transition: all 800ms ease 0s; transform: translate3d(-375px, 0px, 0px);">
               <div class="owl-item" style="width: 375px;">
                    <div class=" news-post standard-post">
                        <div class="d-flex flex-row w-100 pb-0"><img src="640_2020032112180038.jpg" > </div> 
                        <div class="d-flex flex-row bd-highlight mb-3">
<div class="p-3 bd-highlight" style="font-size: 30px;"><i class="fas fa-hp-icon"></i>1499</div> 
<div class="p-3 bd-highlight" style="margin-left: 10px;font-size: 28px;">
<i class="fas fa-driving-icon"></i> F</div> 
                        </div>
                    </div>
                </div>
                <div class="owl-item" style="width: 375px;">
                    <div class=" news-post standard-post">
                        <div class="d-flex flex-row w-100 pb-0"><img src="640_2020032112180038.jpg"> </div> 
                        <div class="d-flex flex-row bd-highlight mb-3">
<div class="p-3 bd-highlight" style="font-size: 30px;"><i class="fas fa-hp-icon"></i>1499</div> 
<div class="p-3 bd-highlight" style="margin-left: 10px;font-size: 28px;">
<i class="fas fa-driving-icon"></i> F</div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

เเต่พอใช้เป็นการดึงผ่านตัว append โดย div_model มันกลายเป็น carousel ไม่ทำงาน

<div class="features-today-box owl-wrapper">
    <div class="owl-carousel " id="div_model" style="opacity: 1;">
        <div class=" news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="640_2020032112180038.jpg"> </div> 
            <div class="d-flex flex-row bd-highlight mb-3">
                <div class="p-3 bd-highlight" style="font-size: 30px;"><i class="fas fa-hp-icon"></i>1499</div> 
                <div class="p-3 bd-highlight" style="margin-left: 10px;font-size: 28px;">
                    <i class="fas fa-driving-icon"></i> F</div> 
            </div>
        </div>

        <div class=" news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="640_2020032112180038.jpg"> </div> 
            <div class="d-flex flex-row bd-highlight mb-3">
                <div class="p-3 bd-highlight" style="font-size: 30px;"><i class="fas fa-hp-icon"></i>1499</div> 
                <div class="p-3 bd-highlight" style="margin-left: 10px;font-size: 28px;">
                    <i class="fas fa-driving-icon"></i> F</div> 
            </div>
        </div>
    </div>
</div>
ซึ่งทั้งสองเเบบมีข้อเเตกต่างอยู่ตรงที่ ถ้าจะให้ตัว carousel ทำงาน จะต้องมี class owl-wrapper-outer owl-wrapper owl-item เกิดขึ้น ซึ่งอันที่ผมได้มีการดึงผ่นตัว append โดย div_model ไม่ได้มี class ทั้ง 3 ตัวนี้เกิดขึ้น ผมจะต้องเเก้ไขอย่างไร เพื่อให้สามารถทำให้ตัว carousel ทำงานได้ปกติ โดยใช้การดึงผ่าน div_model 


Antinew007 20-09-2020 18:44:52

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ตัว plugin จะทำคำสังต่างๆ และ render เป็นผลลัพธ์สุดท้ายออกมา
ถ้าที่เราเพิ่มเข้าไปทีหลัง เป็นการเพิ่มของส่วนเนื้อหา ที่ไม่เกี่ยวกับ
ส่วนที่ถูก render ปกติแล้วจะใช้งานได้ แต่ถ้าเป็นการเพิ่มส่วนที่เกี่ยวข้อง
กับการ render จะทำให้ส่วนที่เพิ่มทีหลัง ไม่ทำงานร่วมกับ plugin 
    วิธีใช้ plugin ที่ถูกต้อง เราต้องเพิ่มหรือกำหนดโครงสร้าง DOM Element 
ให้เรียบร้อยก่อน ถึงเรียกใช้งาน plugin หรือเข้าใจง่ายสุดก็ให้เรียกใช้ plugin
หลังสุด
    อีกวิธีขึ้นกับ plugin ว่ารองรับการ rerender หรือการ render ใหม่หรือไม่
ก็ถ้ารองรับ ก็อาจจะสามารถอัพเดท การ render จากโครงสร้าง DOM Element
ที่มีการเปลี่ยนแปลงได้

ตัวอย่าง DEMO

Ninenik 21-09-2020






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ