jQuery noConflict()

ในขณะที่กำลังใช้งาน jQuery อยู่นั้น หากต้องการใช้งานเฟรมเวิร์กอื่นที่มี shortcut สัญลักษณ์ “$” เหมือนกันกับ jQuery จะทำให้การดำเนินการหลายอย่างเกิดข้อผิดพลาด ด้วยเหตุนี้จึงมีการสร้างเมธอดเพื่อแก้ไขปัญหาที่อาจเกิดขึ้น นั่นคือ noConflict()

 

1.noConflict()

รูปแบบการใช้งาน noConflict() 

เริ่มต้นด้วยการประกาศ $.noConflict(); จากนั้น เปลี่ยน shortcut จากเดิมที่เป็น $ มาเป็น jQuery 

 

$.noConflict();

jQuery(document).ready(function(){
    jQuery(selector).action();
});

 

ตัวอย่างที่ 1 noConfilct()

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("สามารถใช้งาน noConflict() สำเร็จ!");
  });
});
</script>
</head>
<body>

<p>เนื้อหา....</p>
<button>Test jQuery</button>

</body>
</html>

ไฟล์ที่ 1 noConflict()-1

 

ถ้าหากมีการเขียน jQuery ไว้แล้วและไม่ต้องการแก้ไข shortcut กับโค้ดทั้งหมด สามารถส่งพารามิเตอร์เป็น $ ได้ดังตัวอย่างที่ 2 

 

ตัวอย่างที่ 2 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("ใช้งาน noConflict() สำเร็จ!");
  });
});
</script>
</head>
<body>

<p>เนื้อหา....</p>
<button>Test jQuery</button>

</body>
</html>

ไฟล์ที่ 2 noConflict()-2

 

หรือถ้าหากต้องการสร้าง shortcut แบบสั้นๆ ง่ายๆ ก็สามารถทำได้โดยการสร้างตัวแปรเก็บสำหรับเก็บ method noConflict() ดังตัวอย่างที่ 3 

 

ตัวอย่างที่ 3 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("ใช้งาน noConflict() สำเร็จ!");
  });
});
</script>
</head>
<body>

<p>เนื้อหา....</p>
<button>Test jQuery</button>

</body>
</html>

ไฟล์ที่ 3 noConflict()-3