ในการใช้งาน
jquery selector นั้นบางทีแล้วเรานั้นอาจจะต้องการเรียกใช้จาก class ซึ่งบางครับเราอาจจะมีปัญหาที่ว่าเรานั้นตั้งชื่อ class เอาไว้สำหรับการใส่ class เพื่อเรียกใช้งานโค้ดส่วน css เพื่อให้
element ของเราสวยงามขึ้นเพราะเนื่องจากว่าการที่เราจะเรียก class css มาใช้นั้น ชื่อ class จะต้องตรงตามที่เรากำหนดไว้ทุกอย่างครับและบางครับเราก็ไม่อยากจะสร้าง class ใหม่เพื่อใช้เรียกในวันนี้ผมจะมาสอนวิธีการเรียก class โดยที่เรานั้นจะเรียกโดยใช้แค่คำส่วนนึงใน class เท่านั้นไม่หมดเพราะว่าโดยปกติการที่เราจะเรียก class ได้นั้นเราจะต้องทำการเขียนชื่อ class ให้หมดไม่งั้นก็จะเรียกไม่มาครับวันนี้เราจะมาแก้ปัญหานี้กันครับ
โดยเริ่มต้นครับ ผมจะทำการสร้าง element ขึ้นมากโดยผมจะเริ่มต้นจากการสร้าง element ขึ้นมา 1 ตัวครับโดยผมนั้นจะสร้าง element ขึ้นมา 1 ตัวครับโดยผมจะต้องชื่อ class เอาไว้ว่า helloworld ครับ
โค้ด: เลือกทั้งหมด
<div name="01" id="01" class="helloworld" style="width: 300px; height: 300px; background-color: #4c59ce;"></div>
ซึ่งเราก็จะได้ element ที่เป็น กล่องสีเหล่ยม สีฟ้ามา 1 อันครับ จากนั้นก็เหมือนเดิมครับจะสร้างปุ่ามขึ้นมา อีก 1 ปุ่มครับ
โค้ด: เลือกทั้งหมด
<input type="button" id="remove" value="remove">
จากนั้นจะเขียน function ให้กับปุ่มครับ
โค้ด: เลือกทั้งหมด
$("#remove").click(function() {
$("[class^='hello']").hide();
})
ซึ่งเมื่อเราทำการกดปุ่มแล้วจะเห็นได้ว่าตัว selector ของเรานั้นจะดูแปลกๆใช่ไหมล่ะครับนั้นเป็นตัว selector ที่เราพูดถึงกันครับโดย selector ตัวนี้นั้นไม่ได้ใช้เรียกแค่ class เราสามารถเปลี่ยนเป็น ID หรือว่า name ก็ได้ครับ และสัญลักษณ์ ^ นั้นเป็นตัวบ่งบอกว่า class ที่เราเรียกนั้นจะเป็น class ที่ขึ้นต้นด้วย hello ซึ่งตัว element ของเรานั้นมีชื่อ class ว่า helloworld ซึ่งเริ่มต้นด้วย hello เพราะงั้นก็ตรงครับ เมื่อเราทำการกดที่ปุ่มนั้นตัว element ที่มี class นำหน้าว่า hello ทั้งหมดจะหายไปครับ
- ผลลัพธ์การเรียกจากคำนำหน้า class
- ผลลัพธ์การเรียกจากคำนำหน้า class.gif (9.37 KiB) Viewed 1282 times
การที่เราจะใช้กรณีนี้นั้นจะทำได้ก็ต่อเมื่อเรานั้นมีการใช้ชื่อ class ที่ซ้ำกันแต่มีการเปลี่ยนแปลงนิดหน่อยเพื่อให้ใช้
class css ซึ่งผมก็ประสบปัญหาที่ว่าผมนั้นได้สร้าง element มาครับแล้วผมจะใช้ตัว
class นี้ในการดึงเอา css มาใช้แต่ว่าตัว element ผมมีหลายตัวและเป็นประเภทเดียวกันหมดเปลี่ยนแค่สีเฉยๆผมเลยตั้งชื่อ class เอาไว้คล้ายๆกันและเปลี่ยนแค่ตัวเลขด้านหลังจึงทำให้ผมต้องหาวิธีการนี้มาใช้งานครับ ซึ่งวิธีที่ผมบอกนั้นสามารถทำได้ 2 วิธีครับ นั้นก็คือเอาเฉพาะ element ที่มี class ที่เริ่มต้นด้วย .... หรือว่า class ที่มีคำว่า .... ซึ่งในตัวอย่างนั้นจะเป็นคำที่เรนิ่มต้นด้วย และถ้าหากว่ามีคำนี้อยู่ในชื่อ class เราจะต้องเปลี่ยน สัญลักษณ์ ^ เป็น * เพียงเท่านั้นครับผม
อ้างอิง
https://stackoverflow.com/questions/2178416/using-starts-with-selector-on-individual-class-names
https://api.jquery.com/attribute-starts-with-selector/
https://www.w3schools.com/jquery/sel_class.asp
