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

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

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

ภาพประจำตัวสมาชิก
pprn
PHP Super Member
PHP Super Member
โพสต์: 392
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

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

โพสต์โดย pprn » 06/07/2018 11:49 am

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

    Radio คือ ตัวเลือกที่สามารถเลือกด้แค่ตัวเลือกเดียว จะแสดงในรูปแบบของวงกลมสีขาว สามารถคลิกเลือกวงกลมได้

    ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา

รูปแบบคำสั่ง

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

<!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

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

<!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) เปิดดู 114 ครั้ง

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

      star red.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Star Red
      star red.JPG (21.22 KiB) เปิดดู 114 ครั้ง

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

      circle blue.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue
      circle blue.JPG (20.61 KiB) เปิดดู 114 ครั้ง

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

      triangle.JPG
      เมื่อคลิก radio (เรดิโอ) ที่ Triangle
      triangle.JPG (20.62 KiB) เปิดดู 114 ครั้ง


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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน