สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไง

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

Moderator: mindphp

ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไง

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

สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไงหรอครับ คือผมจะทำฟังก์ชันเช็คแท็ก pre ซึ่งในแท็ก pre ก็มีระบุคลาสของภาษาโปรแกรมนั้นๆ เช่น language-markup คือ html หรือ language-javascript คือ javascript เป็นต้น ผมลองเขียนฟังก์ชันแล้วมันขึ้นแต่แท็ก pre แค่ตัวเดียวครับ ต้องทำยังไงให้สามารถเพิ่มหัวข้อชื่อภาษาโปรแกรมทุกตัวหรอครับ

มันขึ้นแค่ตัวเดียวครับ
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (17.26 KiB) Viewed 1249 times

โค้ด: เลือกทั้งหมด

if ($("pre").length) {
	let t = '<div class="flex-code">'+
	'<span class="code-article" id="code-article"></span><button class="flex-code-copy ml-auto gap-2"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 0c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM64 160c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64H64V224h64V160H64z"/></svg>'
	+'Copy code</button></div>';
	$("pre").before(t);
	codeTitle();
	};

	function codeTitle() {
		$("pre").each(function() {
			let preClass = $(this).attr('class');

				switch(preClass) {
					case "language-markup":
						$('#code-article').text('HTML/XML');

					break;
					case "language-javascript":
						$('#code-article').text('Javascript');

					break;
					case "language-css":
						$('#code-article').text('CSS');

					break;
					case "language-php":
						$('#code-article').text('PHP');

					break;
					case "language-ruby":
						$('#code-article').text('Ruby');

					break;
					case "language-python":
						$('#code-article').text('Python');

					break;
					case "language-java":
						$('#code-article').text('Java');

					break;
					case "language-c":
						$('#code-article').text('C');

					break;
					case "language-csharp":
						$('#code-article').text('C#');

					break;
					case "language-cpp":
						$('#code-article').text('C++');

					break;
					
				}
	
		});
	};
:gfb:
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21909
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไง

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

ปกติตามมาตรฐานของการกำหนด Id ให้กับ Element ต่างๆ ในหน้า Web Page ชื่อของ Id ต้องไม่ซ้ำกันนะครับ

จาก Code เหมือนกับว่ามีการกำหนด Id ชื่อ "code-article" มากกว่า 1 ครั้ง ซึ่งตัว Web Page มันจะมองแค่ Id ตัวแรกตัวเดียวครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไง

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

ปรับมาใช้เป็น class แล้วมันขึ้นซ้ำทุกตัวครับ
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (13.25 KiB) Viewed 1240 times

โค้ด: เลือกทั้งหมด

switch(preClass) {
					case "language-markup":
						$('.code-article').text('HTML/XML');

					break;
					case "language-javascript":
						$('.code-article').text('Javascript');

					break;
					case "language-css":
						$('.code-article').text('CSS');

					break;
					case "language-php":
						$('.code-article').text('PHP');

					break;
					case "language-ruby":
						$('.code-article').text('Ruby');

					break;
					case "language-python":
						$('.code-article').text('Python');

					break;
					case "language-java":
						$('.code-article').text('Java');

					break;
					case "language-c":
						$('.code-article').text('C');

					break;
					case "language-csharp":
						$('.code-article').text('C#');

					break;
					case "language-cpp":
						$('.code-article').text('C++');

					break;
					
				}
:gfb:
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21909
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไง

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

ลองวิเคราะห์ส่วนนี้ Code ทำงานได้ถูกต้องแล้วครับ เราเขียนให้มันใส่ Text ให้กับ Class ชื่อ "code-article" ซึ่งทุกอันก็ชื่อเหมือนกันหมด มันจึงแสดงเหมือนกัน

ส่วนนี้ลองปรับ Logic ใน Loop ดูใหม่นะครับ

ใน Loop เรามีการใช้ this เพื่ออ้างอิง pre ใน Loop รอบนั้นๆ อยู่ ซึ่งเราสามารถใช้ this เพื่ออ้างอิงตัว Class ชื่อ "code-article" ที่อยู่ข้างๆ ได้

ใน Code เราใช้คำสั่ง $("pre").before(t); เพื่อให้มันสร้าง Element ไว้ก่อน pre เวลาเราจะอ้างอิงใน Loop ก็สามารถใช้คำสั่ง prev() ได้

เขียนว่า $(this).prev().find('.code-article'); ใน Loop เพื่ออ้างอิงครับ

หรือ อีกวิธีก็ย้ายส่วนที่สร้าง html มาไว้ใน Loop เลย แล้วก็จะได้แปะได้ง่ายขึ้น
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไง

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

tsukasaz เขียน: 15/03/2023 4:19 pm ลองวิเคราะห์ส่วนนี้ Code ทำงานได้ถูกต้องแล้วครับ เราเขียนให้มันใส่ Text ให้กับ Class ชื่อ "code-article" ซึ่งทุกอันก็ชื่อเหมือนกันหมด มันจึงแสดงเหมือนกัน

ส่วนนี้ลองปรับ Logic ใน Loop ดูใหม่นะครับ

ใน Loop เรามีการใช้ this เพื่ออ้างอิง pre ใน Loop รอบนั้นๆ อยู่ ซึ่งเราสามารถใช้ this เพื่ออ้างอิงตัว Class ชื่อ "code-article" ที่อยู่ข้างๆ ได้

ใน Code เราใช้คำสั่ง $("pre").before(t); เพื่อให้มันสร้าง Element ไว้ก่อน pre เวลาเราจะอ้างอิงใน Loop ก็สามารถใช้คำสั่ง prev() ได้

เขียนว่า $(this).prev().find('.code-article'); ใน Loop เพื่ออ้างอิงครับ

หรือ อีกวิธีก็ย้ายส่วนที่สร้าง html มาไว้ใน Loop เลย แล้วก็จะได้แปะได้ง่ายขึ้น
ได้ลองทำตามคำแนะนำแล้วครับ ผมให้มัน loop ทำฟังก์ชันสร้าง html และเพิ่มหัวข้อชื่อโปรแกรมครับ
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (51.66 KiB) Viewed 1230 times

โค้ด: เลือกทั้งหมด

		$("pre").each(function() {
			let t = '<div class="flex-code">'+
			'<span class="code-article" id="code-article"></span><button class="flex-code-copy" id="flex-code-copy"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 0c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM64 160c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64H64V224h64V160H64z"/></svg>'
			+'Copy code</button></div>';
			$(this).before(t);
			let preClass = $(this).attr('class');
			
				switch(preClass) {
					case "language-markup":
						$(this).prev().find('.code-article').text('HTML/XML');

					break;
					case "language-javascript":
						$(this).prev().find('.code-article').text('Javascript');

					break;
					case "language-css":
						$(this).prev().find('.code-article').text('CSS');

					break;
					case "language-php":
						$(this).prev().find('.code-article').text('PHP');

					break;
					case "language-ruby":
						$(this).prev().find('.code-article').text('Ruby');

					break;
					case "language-python":
						$(this).prev().find('.code-article').text('Python');

					break;
					case "language-java":
						$(this).prev().find('.code-article').text('Java');

					break;
					case "language-c":
						$(this).prev().find('.code-article').text('C');

					break;
					case "language-csharp":
						$(this).prev().find('.code-article').text('C#');

					break;
					case "language-cpp":
						$(this).prev().find('.code-article').text('C++');

					break;
					
				}
	
			});
:gfb:
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 36