เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย 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 (เรดิโอ)

Postby 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 1164 times

    2. เมื่อคลิก radio (เรดิโอ) ที่ Star Red

      star red.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Star Red
      star red.JPG (21.22 KiB) Viewed 1164 times

    3. เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue

      circle blue.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue
      circle blue.JPG (20.61 KiB) Viewed 1164 times

    4. เมื่อคลิก radio (เรดิโอ) ที่ Triangle

      triangle.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Triangle
      triangle.JPG (20.62 KiB) Viewed 1164 times


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

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

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests