การใช้ click กับ onclick เพื่อ hide หรือ show ข้อความ

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

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

การใช้ click กับ onclick เพื่อ hide หรือ show ข้อความ

Post by bankjittapol » 11/11/2019 8:27 pm

click และ onclick เป็นส่วนหนึ่งของ javacript function ซึ่งจะทำงานเมื่อ เราคลิก ปุ่ม หรือ ข้อความ ซึ่งข้อแตกต่างคือ click ไม่ต้องเรียกใช้ใน แท็ก ของปุ่ม แต่ onclick ต้องเรียกใช้ และ click คือการใช้ Jquery และ onClick จะเป็น Javascript
effect hide() และ show()
้hide() คือ effect หนึ่งของ javascript ที่ใช้ ซ่อน element
show() คือ effect หนึ่งของ javascript ที่ทำงานต่างจาก hide() คือ จะแสดง element ที่ผู้ใช้ซ่อนไว้

การใช้ click

Code: Select all

<p>test value</p>
<input type="submit" class="hide" value="hide">
<input type="submit" class="show" value="show">

Code: Select all

<script>
$(document).ready(function(){
  $(".hide").click(function(){
    $('p').hide();
  });
  $(".show").click(function(){
    $('p').show();
  });
});
</script>
เมื่อทำการ คลิก ที่ ปุ่ม hide ตัวข้อความ test value จะถูกซ่อน ไว้
แล้ว ทำการคลิก show ตัวข้อความ test value จะแสดง

การใช้ onclick

Code: Select all

<button onclick="clickFunction()">Click</button>
<p id="test"></p>

Code: Select all


<script>
function myFunction() {
  document.getElementById("test").innerHTML = "MindPHP";
}
</script>
เมื่อทำการคลิก ปุ่ม ก็จะแสดงข้อความ MindPHP ขึ้นมา

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 3 guests