Câu trả lời:
Bạn có thể thiết lập lớp (bất kể đó là gì ) bằng cách sử dụng .attr(), như thế này:
$("#td_id").attr('class', 'newClass');Nếu bạn muốn thêm một lớp, sử dụng .addclass()thay thế, như thế này:
$("#td_id").addClass('newClass');Hoặc một cách ngắn để trao đổi các lớp bằng cách sử dụng .toggleClass():
$("#td_id").toggleClass('change_me newClass');Đây là danh sách đầy đủ các phương thức jQuery dành riêng cho classthuộc tính .
.closest('td')thay vì .parents('td:first'):)
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?- có lẽ tôi đang đọc sai, có lẽ anh ấy có nghĩa là sử dụng id của td để thay đổi lớp ...
<td>trong câu hỏi :)
change_mephần này là tùy chọn nếu bạn sử dụngtoggleClass()
Tôi nghĩ rằng anh ấy muốn thay thế một tên lớp.
Một cái gì đó như thế này sẽ làm việc:
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});từ http://monstertut.com/2012/06/use-jquery-to-change-css- class /
Bạn có thể làm điều này:
$("#td_id").removeClass('Old_class');
$("#td_id").addClass('New_class');
Hoặc bạn có thể làm điều này
$("#td_id").removeClass('Old_class').addClass('New_class');Bạn có thể kiểm tra addClass hoặc toggleClass
Vì vậy, bạn muốn thay đổi nó khi nó được nhấp ... hãy để tôi thực hiện toàn bộ quá trình. Giả sử rằng "Đối tượng DOM bên ngoài" của bạn là một đầu vào, giống như chọn:
Hãy bắt đầu với HTML này:
<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>Một số CSS rất cơ bản:
#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}Và thiết lập một sự kiện jQuery:
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});Bây giờ, bất cứ khi nào bạn chọn một cái gì đó từ lựa chọn, nó sẽ tự động tìm một ô có văn bản phù hợp, cho phép bạn lật đổ toàn bộ quá trình dựa trên id. Tất nhiên, nếu bạn muốn làm theo cách đó, bạn có thể dễ dàng sửa đổi tập lệnh để sử dụng ID thay vì giá trị bằng cách nói
.filter("#"+useVal)và đảm bảo thêm id một cách thích hợp. Hi vọng điêu nay co ich!
BIÊN TẬP:
Nếu bạn nói rằng bạn đang thay đổi nó từ một yếu tố lồng nhau , bạn hoàn toàn không cần ID. Bạn có thể làm điều này thay vào đó:
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');Câu trả lời gốc:
$('#td_id').removeClass('change_me').addClass('some_other_class');Một lựa chọn khác là:
$('#td_id').toggleClass('change_me some_other_class');<td>, mặc dù anh ta có thể, đọc lại cẩn thận :)
phương pháp này hiệu quả với tôi
$('#td_id').attr('class','new class');Tôi tốt hơn nên sử dụng .prop để thay đổi className và nó hoạt động hoàn hảo:
$(#td_id).prop('className','newClass');đối với dòng mã này, bạn chỉ cần thay đổi tên của newClass và tất nhiên là id của phần tử, trong ví dụ tiếp theo: idelementinyourpage
$(#idelementinyourpage).prop('className','newClass');Nhân tiện, khi bạn muốn tìm kiếm kiểu nào được áp dụng cho bất kỳ phần tử nào, bạn chỉ cần nhấp vào F12 trên trình duyệt của bạn khi trang của bạn được hiển thị, sau đó chọn trong tab DOM Explorer, phần tử bạn muốn xem. Trong Kiểu bây giờ bạn có thể thấy kiểu nào được áp dụng cho phần tử của bạn và từ đó đọc lớp nào.
var $td = $(this).parents('td:first')] sau đó lấy id [var id = $td.attr('id');] và cả lớp [var class = $td.attr('class');] vì anh ta muốn một phần tử nhấp chuột bên trong TD để kích hoạt nó