พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server
Moderator: mindphp
-
flook
- PHP VIP Members
- โพสต์: 3751
- ลงทะเบียนเมื่อ: 06/06/2022 9:43 am
โพสต์ที่ยังไม่ได้อ่าน
โดย flook »
ผมต้องการลดการใช้งาน js แบบ ซ้ำๆ พอมีวิธีลดการใช้งานของ js แบบซ้ำ โดย ดึงแค่ Id หรือ ทำแบบ data-id ไหมครับ
โค้ด: เลือกทั้งหมด
<div id="gallery3">
<a href=""></a>
</div>
<div id="gallery2">
<a href=""></a>
</div>
<script type="text/javascript">
$(document).ready(function (e) { //ทำงานทันทีเมื่อรีหน้า
// live handler
lc_lightbox('#gallery3 a', {
wrap_class: 'lcl_fade_oc', //เพิ่มคลาส เองไว้ปรับ css ตามที่ต้องการ
gallery: true, //true คือแสดงเป็น gallery ส่วน false จะแสดงแค่ LIGHTBOX ภาพเดียว
thumb_attr: 'data-lcl-thumb', //ลิงก์ตัวอย่างที่ภาพขนาดเล็กกว่า
skin: 'minimal',// theme
radius: 0, //ความโค้งของกรอบ LIGHTBOX
padding: 0,//ระยะห่างข้อข้อความ LIGHTBOX
border_w: 0,//เส้นขอบของ LIGHTBOX
});
});
</script>
<script type="text/javascript">
$(document).ready(function (e) { //ทำงานทันทีเมื่อรีหน้า
// live handler
lc_lightbox('#gallery2 a', {
wrap_class: 'lcl_fade_oc', //เพิ่มคลาส เองไว้ปรับ css ตามที่ต้องการ
gallery: true, //true คือแสดงเป็น gallery ส่วน false จะแสดงแค่ LIGHTBOX ภาพเดียว
thumb_attr: 'data-lcl-thumb', //ลิงก์ตัวอย่างที่ภาพขนาดเล็กกว่า
skin: 'minimal',// theme
radius: 0, //ความโค้งของกรอบ LIGHTBOX
padding: 0,//ระยะห่างข้อข้อความ LIGHTBOX
border_w: 0,//เส้นขอบของ LIGHTBOX
});
});
</script>
-
tsukasaz
- PHP VIP Members
- โพสต์: 21991
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์ที่ยังไม่ได้อ่าน
โดย tsukasaz »
ลองนำ loop มาประยุกต์ใช้ดูครับ
เริ่มต้นลองดู element ที่ครอบ id พวกนี้ก่อน ยกตัวอย่างโค้ด ถ้ามี id ชื่อ gallery_block คลุมอยู่
ตัวอย่าง html
โค้ด: เลือกทั้งหมด
<div id="gallery_block">
<div id="gallery3">
<a href=""></a>
</div>
<div id="gallery2">
<a href=""></a>
</div>
</div>
ใน jquery เขียนวน loop โดยใช้ $.each
ส่วนให้วนคือ $('#gallery_block > div') ให้หา div element ลงไป 1 level ซึ่งก็คือ gallery3 gallery2 ...
โค้ด: เลือกทั้งหมด
<script>
jQuery(function ($) {
$.each($('#gallery_block > div'), function () {
alert(this.id);
let id = this.id;
lc_lightbox('#' + id + ' a', {
// ....
});
});
});
</script>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41232
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
-
ติดต่อ:
-
flook
- PHP VIP Members
- โพสต์: 3751
- ลงทะเบียนเมื่อ: 06/06/2022 9:43 am
โพสต์ที่ยังไม่ได้อ่าน
โดย flook »
ได้แล้วครับ ประยุกต์จาก
กระทู้นี้
tsukasaz เขียน: ↑09/02/2023 11:43 am
ลองนำ loop มาประยุกต์ใช้ดูครับ
เริ่มต้นลองดู element ที่ครอบ id พวกนี้ก่อน ยกตัวอย่างโค้ด ถ้ามี id ชื่อ gallery_block คลุมอยู่
ตัวอย่าง html
โค้ด: เลือกทั้งหมด
<div id="gallery_block">
<div id="gallery3">
<a href=""></a>
</div>
<div id="gallery2">
<a href=""></a>
</div>
</div>
ใน jquery เขียนวน loop โดยใช้ $.each
ส่วนให้วนคือ $('#gallery_block > div') ให้หา div element ลงไป 1 level ซึ่งก็คือ gallery3 gallery2 ...
โค้ด: เลือกทั้งหมด
<script>
jQuery(function ($) {
$.each($('#gallery_block > div'), function () {
alert(this.id);
let id = this.id;
lc_lightbox('#' + id + ' a', {
// ....
});
});
});
</script>
และดู จาก vdo ของ กระทู้นี้นาทีที่ 9
mindphp เขียน: ↑09/02/2023 11:51 am
นาทีที่ 8
ผลลัพธ์ที่ได้ทำงานได้ครับ ลดการเขียนได้เยอะครับ
ใช้เครื่องหมายนี้ ^ เพื่อดึง id ที่ขึ้นต้น ด้วย gallery
โค้ด: เลือกทั้งหมด
$.each($('div[id^="gallery"]'), function () {
// alert(this.id);
lc_lightbox('#'+this.id+' .content-m-gallery a', {
wrap_class: 'lcl_fade_oc', //เพิ่มคลาส เองไว้ปรับ css ตามที่ต้องการ
gallery: true, //true คือแสดงเป็น gallery ส่วน false จะแสดงแค่ LIGHTBOX ภาพเดียว
thumb_attr: 'data-lcl-thumb', //ลิงก์ตัวอย่างที่ภาพขนาดเล็กกว่า
skin: 'minimal',// theme
radius: 0, //ความโค้งของกรอบ LIGHTBOX
padding: 0,//ระยะห่างข้อข้อความ LIGHTBOX
border_w: 0,//เส้นขอบของ LIGHTBOX
});
});
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 65