พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server
Moderator: mindphp
Thanapoom1514
PHP VIP Members
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 15/03/2023 3:37 pm
สอบถามวิธีเพิ่มหัวข้อชื่อภาษาโปรแกรมยังไงหรอครับ คือผมจะทำฟังก์ชันเช็คแท็ก pre ซึ่งในแท็ก pre ก็มีระบุคลาสของภาษาโปรแกรมนั้นๆ เช่น language-markup คือ html หรือ language-javascript คือ javascript เป็นต้น ผมลองเขียนฟังก์ชันแล้วมันขึ้นแต่แท็ก pre แค่ตัวเดียวครับ ต้องทำยังไงให้สามารถเพิ่มหัวข้อชื่อภาษาโปรแกรมทุกตัวหรอครับ
มันขึ้นแค่ตัวเดียวครับ
JavaScript & jQuery Ajax & Node.JS-1.png (17.26 KiB) Viewed 1374 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;
}
});
};
tsukasaz
PHP VIP Members
โพสต์: 22135 ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์ที่ยังไม่ได้อ่าน
โดย tsukasaz » 15/03/2023 3:42 pm
ปกติตามมาตรฐานของการกำหนด 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
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 15/03/2023 3:54 pm
ปรับมาใช้เป็น class แล้วมันขึ้นซ้ำทุกตัวครับ
JavaScript & jQuery Ajax & Node.JS-1.png (13.25 KiB) Viewed 1365 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;
}
tsukasaz
PHP VIP Members
โพสต์: 22135 ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์ที่ยังไม่ได้อ่าน
โดย 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 เลย แล้วก็จะได้แปะได้ง่ายขึ้น
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995 )
Thanapoom1514
PHP VIP Members
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 15/03/2023 6:49 pm
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 (51.66 KiB) Viewed 1355 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;
}
});
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 78