เปลี่ยนชื่อคลาส jquery

336

ฉันต้องการเปลี่ยนคลาสของแท็ก td โดยระบุ id ของแท็ก td:

<td id="td_id" class="change_me"> ...

ฉันต้องการที่จะสามารถทำเช่นนี้ในขณะที่อยู่ในเหตุการณ์คลิกของวัตถุ Dom อื่น ๆ ฉันจะคว้า ID ของ td และเปลี่ยนคลาสได้อย่างไร

jquery css

— aeq
แหล่งที่มา

704

คุณสามารถตั้งค่าคลาส (ไม่ว่ามันจะเป็นอะไร) โดยใช้.attr()แบบนี้:

$("#td_id").attr('class', 'newClass');

หากคุณต้องการเพิ่มคลาสให้ใช้.addclass()แทนเช่นนี้

$("#td_id").addClass('newClass');

หรือวิธีสั้น ๆ เพื่อสลับคลาสโดยใช้.toggleClass():

$("#td_id").toggleClass('change_me newClass');

นี่คือรายการเต็มรูปแบบของวิธีการ jQuery เฉพาะสำหรับclassแอตทริบิวต์

— Nick Craver
แหล่งที่มา

สวัสดี @Nick เพิ่มตัวจัดการเหตุการณ์ที่พบผู้ปกครอง td แรก [ var $td = $(this).parents('td:first')] จากนั้นรับ id [ var id = $td.attr('id');] และ class [ var class = $td.attr('class');] เพราะเขาต้องการองค์ประกอบคลิกภายใน TD เพื่อเรียกใช้

— Bob Fincheimer

@Bob - ฉันไม่ปฏิบัติตามคุณจะได้รับจากคำถามอื่นที่ไหน หนึ่งนี้บอกว่าเขามี ID ขององค์ประกอบ :) นอกจากนี้ยังจะได้รับผู้ปกครองคุณสามารถใช้.closest('td')แทน.parents('td:first'):)

— นิค Craver

1

ประโยคสุดท้ายของเขา:

I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?

- ฉันอาจจะอ่านผิดบางทีเขาอาจหมายถึงการใช้รหัสของ td เพื่อเปลี่ยนชั้นเรียน ...

— Bob Fincheimer

1

@Bob - ถูกต้อง ... วัตถุ DOM อื่น ๆบางอย่างคุณกำลังสมมติว่าวัตถุนั้นอยู่<td>ในคำถาม :)

— Nick Craver

โปรดทราบว่าchange_meส่วนนี้เป็นทางเลือกถ้าคุณใช้toggleClass()

— sakisk

93

ฉันคิดว่าคุณกำลังมองหาสิ่งนี้:

$('#td_id').removeClass('change_me').addClass('new_class');

— Fosco
แหล่งที่มา

32

ฉันคิดว่าเขาต้องการแทนที่ชื่อคลาส

สิ่งนี้จะทำงาน:

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

จากhttp://monstertut.com/2012/06/use-jquery-to-change-css-class/

— ช่องเสียบ
แหล่งที่มา

แต่เขาต้องการที่จะทำมันในเหตุการณ์คลิกของวัตถุ dom อื่น ๆ

— keyser

9

คุณสามารถทำได้: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); หรือคุณสามารถทำสิ่งนี้

$("#td_id").removeClass('Old_class').addClass('New_class');

— Alireza Masali
แหล่งที่มา

6

คุณสามารถตรวจสอบaddClassหรือtoggleClass

— Karl Johan
แหล่งที่มา

6

ดังนั้นคุณต้องการที่จะเปลี่ยนเมื่อมีการคลิก ... ให้ฉันผ่านกระบวนการทั้งหมด สมมติว่า "External DOM Object" ของคุณเป็นอินพุตเช่นตัวเลือก:

เริ่มต้นด้วย HTML นี้:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

CSS พื้นฐานบางอย่างมาก:

#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

และตั้งค่าเหตุการณ์ jQuery:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

ตอนนี้เมื่อใดก็ตามที่คุณเลือกบางอย่างจากการเลือกมันจะค้นหาเซลล์ที่มีข้อความที่ตรงกันโดยอัตโนมัติซึ่งจะช่วยให้คุณล้มล้างกระบวนการที่ใช้รหัสทั้งหมด แน่นอนถ้าคุณต้องการทำเช่นนั้นคุณสามารถปรับเปลี่ยนสคริปต์เพื่อใช้ ID แทนค่าได้โดยง่าย

.filter("#"+useVal)

และตรวจสอบให้แน่ใจว่าได้เพิ่มรหัสอย่างเหมาะสม หวังว่านี่จะช่วยได้!

— Trafalmadorian
แหล่งที่มา

4

แก้ไข:

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

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

คำตอบเดิม:

$('#td_id').removeClass('change_me').addClass('some_other_class');

ตัวเลือกอื่นคือ:

$('#td_id').toggleClass('change_me some_other_class');

— user113716
แหล่งที่มา

ฉันไม่คิดว่าสหกรณ์เป็นภายใน<td>แม้ว่าเขาอาจจะมีอีกครั้งอ่านอย่างละเอียด :)

— นิค Craver

@ Nick - ใช่ฉันเพิ่มการปรับปรุงเพราะผมอ่านอีกครั้งและเห็นว่า OP ถาม"ฉันจะคว้ารหัส td และการเปลี่ยนแปลง ..." สิ่งนี้ทำให้ฉันเชื่อว่า OP ไม่มีการจัดการกับ ID ซึ่งจะทำให้คำตอบดั้งเดิมของฉันไม่เป็นประโยชน์มาก รับนี้ฉันสมมติว่าองค์ประกอบที่มีตัวจัดการซ้อนกัน แต่มันก็เป็นสมมติฐานอย่างแน่นอน

— user113716

2

ในกรณีที่คุณมีชั้นเรียนอยู่แล้วและต้องการสลับไปมาระหว่างชั้นเรียนซึ่งตรงข้ามกับการเพิ่มชั้นเรียนคุณสามารถโยงเหตุการณ์สลับ:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});

— lentyai
แหล่งที่มา

2

$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});

— Prabhu
แหล่งที่มา

1

วิธีนี้ใช้ได้ดีสำหรับฉัน

$('#td_id').attr('class','new class');

— Puterafx Fx
แหล่งที่มา

ทำรายละเอียดบางอย่างเกี่ยวกับมัน

— เครื่องบิน

0

เปลี่ยนคลาสโดยใช้ jquery

ลองนี้

$('#selector_id').attr('class','new class');

คุณยังสามารถตั้งค่าแอตทริบิวต์ใด ๆ โดยใช้แบบสอบถามนี้

$('#selector_id').attr('Attribute Name','Attribute Value');

— รัก Kumar
แหล่งที่มา

-1

ฉันควรใช้ .prop เพื่อเปลี่ยน className และทำงานได้อย่างสมบูรณ์:

$(#td_id).prop('className','newClass');

สำหรับรหัสบรรทัดนี้คุณเพียงแค่เปลี่ยนชื่อ newClass และแน่นอนว่า id ขององค์ประกอบในตัวอย่างถัดไป: idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

เมื่อคุณต้องการค้นหาสไตล์ที่ใช้กับองค์ประกอบใด ๆ คุณเพียงแค่คลิก F12 บนเบราว์เซอร์ของคุณเมื่อหน้าของคุณปรากฏขึ้นจากนั้นเลือกในแท็บของ DOM Explorer ซึ่งเป็นองค์ประกอบที่คุณต้องการดู ในสไตล์คุณสามารถดูว่าสไตล์ใดที่นำไปใช้กับองค์ประกอบของคุณ

— อเล็กซิสกัซซัน
แหล่งที่มา