วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง
โพสต์แล้ว: 15/11/2019 6:29 pm
ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก css และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ html ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป
ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
ตัวอย่าง การนำค่า จาก attribute ที่อยู่ใน element หนึ่ง ส่งไปให้กับ attribute ที่อยู่ในอีก element หนึ่ง
1.
ตัวอย่าง : โคดส่ววนี้จะเป็นส่วนที่เป็น listbox สำหรับเลือกข้อมูล โดยในข้อมูลที่เลือกนั้นจะมีส่วนที่ที่เป็นรูปภาพด้วย รูปภาพ
2.สร้าง tag ขึ้นมา เพื่อใช้สำหรับระบุตำแหน่งของ อีก attribute หนึ่งที่อยู่ต่าง element โดยจะระบุอยู่ที่ value
3.สร้างปุ่มขึ้นมาเพื่อทำการกดยืนยัน สำหรับการส่งค่า
4.สร้าง tag <script> ที่ด้านล่างข้อง tag html
<script>
------
</script>
5.สร้างฟังชั่น javascript ดังนี้
ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
ตัวอย่าง การนำค่า จาก attribute ที่อยู่ใน element หนึ่ง ส่งไปให้กับ attribute ที่อยู่ในอีก element หนึ่ง
1.
โค้ด: เลือกทั้งหมด
<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>
2.สร้าง tag ขึ้นมา เพื่อใช้สำหรับระบุตำแหน่งของ อีก attribute หนึ่งที่อยู่ต่าง element โดยจะระบุอยู่ที่ value
โค้ด: เลือกทั้งหมด
<input type="hidden" id="blockid" value="po_10">
3.สร้างปุ่มขึ้นมาเพื่อทำการกดยืนยัน สำหรับการส่งค่า
โค้ด: เลือกทั้งหมด
<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>
<script>
------
</script>
5.สร้างฟังชั่น javascript ดังนี้
โค้ด: เลือกทั้งหมด
$('.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');
});