เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript (จาวาสคิปต์) โดยใช้ radio (เรดิโอ)

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript (จาวาสคิปต์) โดยใช้ radio (เรดิโอ)

Post by pprn » 06/07/2018 11:49 am

  • JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)
  • Radio คือ ตัวเลือกที่สามารถเลือกด้แค่ตัวเลือกเดียว จะแสดงในรูปแบบของวงกลมสีขาว สามารถคลิกเลือกวงกลมได้
  • ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา
รูปแบบคำสั่ง

Code: Select all

<!DOCTYPE html>
<html><head>
    <script src="https://ajax.googleapis.com/jquery.min.js"></script>   	
   
    <script>
	function function_name() {  										
            var variable_name = document.getElementById("element_id_input").value + ".jpg"; 
            document.getElementById("element_id_output").src = variable_name;       
        }

</script>
</head>
<body>
 
    <input type="radio" name="......" value="picture_name" id="element_id_input" onclick="function_name();">Text_output
   
    <br><img id="element_id_output" src="">
 
</body>
</html>
อธิบายโค้ด
  • - <script src="https://ajax.googleapis.com/jquery.min.js"></script> คือ Google CND
    - function_name คือ ชื่อฟังก์ชั่น
    - variable_name คือ ชื่อตัวแปร
    - document.getElementById คือ คำสั่งสำหรับการเข้าถึง Element Id
    - element_id_input" คือ ชื่อไอดี
    - element_id_output คือ ชื่อไอดี
    - value + ".jpg"; คือ ใช้ไฟล์ที่มีนามสกุล .jpg เท่านั้น
    - input type="radio" คือ รูปแบบ form (ฟอร์ม) radio (เรดิโอ) ใน html
    - onclick="function_name(); คือเหตุการณ์ function_name จะเกิดขึ้นเมื่อคลิกส์เมาส์
    - Text_output คือ ข้อความที่ต้องการพิมพ์ออกมาแสดงให้ผู้ใช้เห็น
ตัวอย่าง
  • ภาพมีชื่อว่า Star Yellow.jpg, Star Red.jpg, Circle Blue.jpg และ Triangle.jpg

Code: Select all

<!DOCTYPE html>
<html><head>
    <script src="https://ajax.googleapis.com/jquery.min.js"></script>   	
   
    <script>
       
        function imag1() {  										
            var image = document.getElementById("c1").value + ".jpg"; 
            document.getElementById("picture").src = image;       
        }
 
        function imag2(){  
            var image = document.getElementById("c2").value + ".jpg"; 
            document.getElementById("picture").src = image;       
        }
        function imag3() {  
            var image = document.getElementById("c3").value + ".jpg"; 
            document.getElementById("picture").src = image;       
        }
        function imag4() {  
            var image = document.getElementById("c4").value + ".jpg"; 
            document.getElementById("picture").src = image;       
        }
    </script>
</head>
<body>
 
    <input type="radio" name="product" value="Star Yellow" id="c1" onclick="imag1();">Star Yellow
    <input type="radio" name="product" value="Star Red" id="c2" onclick="imag2();">Star Red
    <input type="radio" name="product" value="Circle Blue" id="c3" onclick="imag3();">Circle Blue
    <input type="radio" name="product" value="Triangle" id="c4" onclick="imag4();">Triangle
   
   
    <br><img id="picture" src="">
 
</body>
</html>
ผลลัพธ์
  • 1. เมื่อคลิก radio (เรดิโอ) ที่ Star Yellow
    • star yellow.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Star Yellow
      star yellow.JPG (18.41 KiB) Viewed 1181 times
  • 2. เมื่อคลิก radio (เรดิโอ) ที่ Star Red
    • star red.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Star Red
      star red.JPG (21.22 KiB) Viewed 1181 times
  • 3. เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue
    • circle blue.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue
      circle blue.JPG (20.61 KiB) Viewed 1181 times
  • 4. เมื่อคลิก radio (เรดิโอ) ที่ Triangle
    • triangle.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Triangle
      triangle.JPG (20.62 KiB) Viewed 1181 times

----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 4 guests