ขออนุญาต สอบถามการนำข้อมูลที่ได้จากการ append ไปใส่ในตัว carousel หน่อยครับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขออนุญาต สอบถามการนำข้อมูลที่ได้จากการ append ไปใส่ในตัว carousel หน่อยครับ
ขออนุญาต สอบถามการนำข้อมูลที่ได้จากการ append ไปใส่ในตัว carousel หน่อยครับ
Copy
ติดปัญหาเกี่ยวกับการนำข้อมูลที่ได้จากการ ลูป เเล้วนำไป append ใส่ตัวเเปล เพื่อทำเป็นตัว carousel คือมันยังไม่สามารถทำให้เป็นตัว carousel ได้ครับ รบกวนเเนะนำหน่อยครับ
เมื่อผมลองเทสดูเเบบการนำข้อมูลไปแปะใส่ลงในตัว div ตัว carousel มันก็ทำงานได้ปกติดีครับ ตาตัวอย่างด้านล่าง
เเต่พอใช้เป็นการดึงผ่านตัว append โดย div_model มันกลายเป็น 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
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ