ไม่กี่วันที่ผ่านมาเมื่อฉันเขียนรหัส JS front-end ในที่ทำงานฉันพบองค์ประกอบการสำรวจและเพิ่มเหตุการณ์คลิกลงไป มันเป็นปัญหานี้ที่ทำให้ฉันปรับตลอดบ่าย ในที่สุดฉันกลับบ้านจากการออกจากงานและค้นหาข้อมูลออนไลน์เพื่อหาวิธีแก้ปัญหา (PS: ฉันยังอ่านเนื้อหาของโปรแกรมประมวลผลลูปที่มีผลผูกพันในรุ่นที่สี่ของ "JQuery Basic Tutorial" ฉันคิดว่าฉันไม่ได้อ่านอย่างระมัดระวังในเวลานั้นดังนั้นฉันจึงจำไม่ได้)
หากอาจารย์ผู้ยิ่งใหญ่รู้สถานการณ์แบบนี้เขาสามารถปิดหน้าต่างและเขียนสิ่งเหล่านี้เป็นส่วนใหญ่สำหรับมือใหม่เช่นฉัน ขอบคุณ!
มาโพสต์ตัวอย่างที่ไม่ถูกต้องก่อนเพื่อให้ทุกคนได้เห็น (jQuery ใช้ในตัวอย่างโปรดนำเข้าห้องสมุด jQuery)
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> ตัวจัดการการเชื่อมโยงลูป </title>
<script src = "js/jQuery-2.1.1.min.js"> </script>
<script type = "text/javascript">
$ (function () {
สำหรับ (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = function () {
การแจ้งเตือน (i);
-
-
-
</script>
</head>
<body>
<button id = "btn1"> ปุ่ม 1 </button>
<button id = "btn2"> ปุ่ม 2 </button>
<button id = "btn3"> ปุ่ม 3 </button>
<button id = "btn4"> ปุ่ม 4 </button>
</body>
</html>
หลังจากเรียกใช้รหัสนี้ให้คลิกปุ่มและข้อมูลที่แสดงในการแจ้งเตือนแบบป๊อปอัพจะปรากฏขึ้น ฉันคิดเสมอว่าปุ่ม 1 ถึง 4 และตัวเลขที่เกี่ยวข้องในการแจ้งเตือนก็คือ 1 ถึง 4 ถ้าคุณคิดอย่างนั้นคุณคิดผิด
คลิกแต่ละปุ่มและหมายเลข 4 จะปรากฏขึ้นในการแจ้งเตือน ฉันไม่ได้คาดหวัง!
ตอนนี้เขียนโซลูชันบางอย่างสำหรับการอ้างอิงของคุณ!
ประเภทแรกคือการเขียนฟังก์ชั่นและส่งคืนฟังก์ชั่นในฟังก์ชั่นนี้
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ (function () {
สำหรับ (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = btnclick (i);
-
-
var btnclick = function (value) {
return function () {
การแจ้งเตือน (ค่า);
-
-
</script>
ประเภทที่สอง: ใช้นิพจน์ฟังก์ชั่นการโทรทันที
(ฟังก์ชัน (ค่า) {
// รหัสบล็อก
}) (i) // นี่คือการเรียกนิพจน์ฟังก์ชันทันที
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ (function () {
สำหรับ (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = (ฟังก์ชัน (ค่า) {
return function () {
การแจ้งเตือน (ค่า);
} })(ฉัน);
-
-
</script>
ประเภทที่สาม: แต่ละฟังก์ชั่นโดยใช้ jQuery
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ (function () {
$ .Each ([1,2,3,4], ฟังก์ชั่น (ดัชนี, ค่า) {
$ ("#btn"+ค่า) .get (0) .onclick = function () {
การแจ้งเตือน (ค่า);
-
-
-
</script>
การใช้สามสถานการณ์ข้างต้นสามารถหลีกเลี่ยงสถานการณ์นั้นได้ในตอนต้น
โดยที่รับ (0) หมายถึงการแปลงวัตถุ jQuery เป็นวัตถุ DOM
ข้างต้นคือความเข้าใจส่วนบุคคลของฉันเกี่ยวกับตัวจัดการการเชื่อมโยงลูปในการปิด JS ฉันจะแบ่งปันกับคุณ ฉันหวังว่ามันจะเป็นประโยชน์กับเพื่อนของฉัน