jQuery jquery更改类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3452778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change class name
提问by aeq
I want to change the class of a td tag given the td tag's id:
我想根据 td 标签的 id 更改 td 标签的类：
<td id="td_id" class="change_me"> ...
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?
我希望能够在其他一些 dom 对象的点击事件中执行此操作。如何获取 td 的 id 并更改其类？
回答by Nick Craver
You can setthe class (regardless of what it was) by using .attr(), like this:
您可以使用设置类（无论它是什么）.attr()，如下所示：
$("#td_id").attr('class', 'newClass');
If you want to adda class, use .addclass()instead, like this:
如果要添加类，请.addclass()改用，如下所示：
$("#td_id").addClass('newClass');
Or a short way to swap classes using .toggleClass():
或者使用.toggleClass()以下方法交换类的简短方法：
$("#td_id").toggleClass('change_me newClass');
Here's the full list of jQuery methods specifically for the classattribute.
回答by Fosco
I think you're looking for this:
我想你正在寻找这个：
$('#td_id').removeClass('change_me').addClass('new_class');
回答by Hyman
I think he wants to replace a class name.
我认为他想替换一个类名。
Something like this would work:
像这样的事情会起作用：
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
from http://monstertut.com/2012/06/use-jquery-to-change-css-class/
来自http://monstertut.com/2012/06/use-jquery-to-change-css-class/
回答by Alireza Masali
You can do This :
$("#td_id").removeClass('Old_class');
$("#td_id").addClass('New_class');Or You can do This
你可以这样做：
$("#td_id").removeClass('Old_class');
$("#td_id").addClass('New_class');或者你可以这样做
$("#td_id").removeClass('Old_class').addClass('New_class');
回答by Karl Johan
You can check out addClassor toggleClass
您可以查看addClass或toggleClass
回答by Trafalmadorian
So you want to change it WHEN it's clicked...let me go through the whole process. Let's assume that your "External DOM Object" is an input, like a select:
所以你想在它被点击时改变它......让我完成整个过程。让我们假设您的“外部 DOM 对象”是一个输入，就像一个选择：
Let's start with this HTML:
让我们从这个 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>
Some very basic CSS:
一些非常基本的 CSS：
?#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
And set up a jQuery event:
并设置一个 jQuery 事件：
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
Now, whenever you pick something from the select, it will automatically find a cell with the matching text, allowing you to subvert the whole id-based process. Of course, if you wanted to do it that way, you could easily modify the script to use IDs rather than values by saying
现在，无论您何时从 select 中选择某些内容，它都会自动查找具有匹配文本的单元格，从而颠覆整个基于 id 的过程。当然，如果您想这样做，您可以通过说轻松修改脚本以使用 ID 而不是值
.filter("#"+useVal)
and make sure to add the ids appropriately. Hope this helps!
并确保适当地添加 ID。希望这可以帮助！
回答by user113716
EDIT:
编辑：
If you're saying that you're changing it from a nestedelement, you don't need the ID at all. You can do this instead:
如果您说要从嵌套元素更改它，则根本不需要 ID。你可以这样做：
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Original answer:
原答案：
$('#td_id').removeClass('change_me').addClass('some_other_class');
Another option is:
另一种选择是：
$('#td_id').toggleClass('change_me some_other_class');
回答by lentyai
In the event that you already have a class and need to alternate between classes as oppose to add a class, you can chain toggle events:
如果您已经有一个类并且需要在类之间交替以反对添加类，您可以链接切换事件：
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
回答by Prabhu
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
回答by Puterafx Fx
this method works well for me
这个方法对我很有效
$('#td_id').attr('class','new class');
