วิธีรับคลาสขององค์ประกอบที่คลิกได้อย่างไร


228

ฉันไม่สามารถหาวิธีรับclassคุณค่าขององค์ประกอบที่คลิกได้

เมื่อฉันใช้รหัสตะโกนฉันได้รับ"node-205"ทุกครั้ง

jQuery:

.find('> ul')
.tabs(
{
    selectedClass: 'active',
    select: function (event, ui) {
        //shows only the first element of list
        $(this).children('li').attr('class');
    },
    cookie: { expires: 0 },
    fx: fx
})

HTML:

<ul class="tabs">
  <li class="node-205"></li>
  <li class="node-150"></li>
  <li class="node-160"></li>
</ul>

คำถามของคุณค่อนข้างชัดเจน ... คุณใช้ปลั๊กอิน jquery หรือไม่?
jrharshath

หากเป็นรายการที่ถูกคลิกคุณไม่ควรใช้ฟังก์ชัน click () เพื่อผูกกิจกรรมและรับคลาสใช่ไหม บางทีฉันอาจจะไม่เข้าใจคำถาม ...
E-satis

คำตอบ:


396

ต่อไปนี้เป็นตัวอย่าง jQuery อย่างรวดเร็วที่เพิ่มเหตุการณ์การคลิกไปยังแท็ก "li" แต่ละอันจากนั้นดึงแอตทริบิวต์ class สำหรับองค์ประกอบที่คลิก หวังว่ามันจะช่วย

$("li").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

คุณไม่จำเป็นต้องล้อมวัตถุใน jQuery:

$("li").click(function() {
   var myClass = this.className;
   alert(myClass);
});

และในเบราว์เซอร์ที่ใหม่กว่าคุณจะได้รับรายชื่อเต็มของคลาส :

$("li").click(function() {
   var myClasses = this.classList;
   alert(myClasses.length + " " + myClasses[0]);
});

คุณสามารถจำลองclassListในเบราว์เซอร์รุ่นเก่าโดยใช้myClass.split(/\s+/);


1
"class" ไม่ใช่ชื่อตัวแปรที่ถูกต้อง
Fred Bergman

1
หนึ่งในสถานการณ์ตลก ๆ ที่ jQuery อยู่ไกล this.className จะให้เหมือนกับ $ (this) .attr ("class")
David Gilbertson

เกิดอะไรขึ้นถ้าองค์ประกอบมีชื่อคลาสมากกว่าหนึ่ง
Dharman

1
ไม่แน่ใจว่าทำไม แต่ตัวอย่างที่ 2 ไม่สามารถเรียกชื่อคลาสสำหรับฉันได้ อย่างไรก็ตามตัวอย่างที่ 1 ใช้งานได้ดี! ขอบคุณ! ช่วยฉันที :)
Chiefwarpaint


28

ฉันเห็นคำถามนี้ดังนั้นฉันคิดว่าฉันอาจขยายตัวได้อีกเล็กน้อย นี่คือการขยายตัวของแนวคิดที่ @SteveFenton แทนที่จะผูกclickเหตุการณ์กับแต่ละliองค์ประกอบมันจะมีประสิทธิภาพมากขึ้นในการมอบหมายกิจกรรมจากulล่าง

สำหรับ jQuery 1.7 และสูงกว่า

$("ul.tabs").on('click', 'li', function(e) {
   alert($(this).attr("class"));
});

เอกสารอ้างอิง: .on()

สำหรับ jQuery 1.4.2 - 1.7

$("ul.tabs").delegate('li', 'click', function(e) {
   alert($(this).attr("class"));
});

เอกสารอ้างอิง: .delegate()

เป็นทางเลือกสุดท้ายสำหรับ jQuery 1.3 - 1.4

$("ul.tabs").children('li').live('click', function(e) {
   alert($(this).attr("class"));
});

หรือ

$("ul.tabs > li").live('click', function(e) {
   alert($(this).attr("class"));
});

เอกสารอ้างอิง: .live()


17

สิ่งนี้ควรทำเคล็ดลับ:

...
select: function(event, ui){ 
   ui.tab.attr('class');
} ,
...

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ ui.tab ดูที่http://jqueryui.com/demos/tabs/#Events


สิ่งนี้หมายความว่า? คุณช่วยอธิบายเพิ่มเติมได้ไหม

มันเป็น ui.tab แทน ui.item ที่คุณต้องใช้ ฉันคิดว่ามันเป็น ui.item
jeroen.verhoest

11

ทั้งหมดการแก้ปัญหาแรงที่มีให้คุณรู้ว่าองค์ประกอบที่คุณจะคลิกก่อน หากคุณต้องการรับคลาสจากองค์ประกอบใด ๆ ที่คลิกคุณสามารถใช้:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })

2
ควรสังเกตว่าหากการรับ ID ไม่น่าเชื่อถือใครสามารถใช้$(e.target)แทนได้$('#' + e.target.id)และ jQuery จะยังคงจัดการกับกรณีนี้อย่างสมเหตุสมผล
BobChao87

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.