วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง

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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3130
Joined: 19/09/2018 10:33 am

วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง

Post by Ittichai_chupol » 15/11/2019 6:29 pm

ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก css และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ html ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป

ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้


ตัวอย่าง การนำค่า จาก attribute ที่อยู่ใน element หนึ่ง ส่งไปให้กับ attribute ที่อยู่ในอีก element หนึ่ง

1.

Code: Select all

                                 
          <select class="selectpicker" id="name_player" name="">
              <?php while ($r_play = mysqli_fetch_assoc($rstplay)) {  // ดึงข้อมูลมาจากการ Query จากฐานข้อมูล (สามารถปรับเปลี่ยนได้ตามการใช้งาน)
                 <option value="<?php echo $r_play['play_id']; ?>" data-thumbnail="player_image/<?php echo $r_play['play_img'];?>" >
                 </option>
            <?php } ?>
         </select>

ตัวอย่าง : โคดส่ววนี้จะเป็นส่วนที่เป็น listbox สำหรับเลือกข้อมูล โดยในข้อมูลที่เลือกนั้นจะมีส่วนที่ที่เป็นรูปภาพด้วย รูปภาพ
Selection_999(2207).png
2.สร้าง tag ขึ้นมา เพื่อใช้สำหรับระบุตำแหน่งของ อีก attribute หนึ่งที่อยู่ต่าง element โดยจะระบุอยู่ที่ value

Code: Select all

   <input type="hidden" id="blockid" value="po_10">  

3.สร้างปุ่มขึ้นมาเพื่อทำการกดยืนยัน สำหรับการส่งค่า

Code: Select all


          <div class="modal-footer">
                        <a  class="btn btn-primary submita" >Submit</a>
                        <!-- <button type="submit"  class="btn btn-primary" data-dismiss="modal">Submit</button> -->
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>

4.สร้าง tag <script> ที่ด้านล่างข้อง tag html
<script>
------
</script>

5.สร้างฟังชั่น javascript ดังนี้

Code: Select all


   $('.submita').click(function(){
              
                var selvalue =  $('.selectpicker').val();
                 var blockid = $('#blockid').val();
                var  img = $('.selectpicker option:selected').attr('data-thumbnail');
                var img_show = '<img src="./'+img+'" alt="Smiley face" height="42" width="42"><br>'
                     $('#'+blockid+' .setplayer').val(selvalue);
                     $('#'+blockid+' .showplayer').html(img_show);
                     $('#myModal').modal('hide');

                });


Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests