สอบถามเกี่ยวกับการลดการใช้งานของ Js

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

flook
PHP VIP Members
PHP VIP Members
โพสต์: 3751
ลงทะเบียนเมื่อ: 06/06/2022 9:43 am

สอบถามเกี่ยวกับการลดการใช้งานของ Js

โพสต์ที่ยังไม่ได้อ่าน โดย 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
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามเกี่ยวกับการลดการใช้งานของ Js

โพสต์ที่ยังไม่ได้อ่าน โดย 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
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามเกี่ยวกับการลดการใช้งานของ Js

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

นาทีที่ 8
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
flook
PHP VIP Members
PHP VIP Members
โพสต์: 3751
ลงทะเบียนเมื่อ: 06/06/2022 9:43 am

Re: สอบถามเกี่ยวกับการลดการใช้งานของ Js

โพสต์ที่ยังไม่ได้อ่าน โดย 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