jquery mudar o nome da classe
quero mudar a classe de uma marca td dada a identificação da marca td:
<td id="td_id" class="change_me"> ...
eu quero ser capaz de fazer isso enquanto dentro do evento clique de algum outro objeto dom. Como é que pego na identificação do td e mudo de turma?
11 answers
Você pode definir a classe (independentemente do que era ) usando .attr(), assim:
$("#td_id").attr('class', 'newClass');
Se quiser adicionar uma classe, use .addclass() em vez disso, assim:
$("#td_id").addClass('newClass');
Ou uma forma curta de trocar classes usando .toggleClass():
$("#td_id").toggleClass('change_me newClass');
Aqui está a lista completa dos métodos jQuery especificamente para o atributo class .
$('#td_id').removeClass('change_me').addClass('new_class');
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
De http://monstertut.com/2012/06/use-jquery-to-change-css-class/
$("#td_id").removeClass('Old_class');
$("#td_id").addClass('New_class');
Ou você pode fazer isso
$("#td_id").removeClass('Old_class').addClass('New_class');
Pode verificar addClass ou toggleClass
<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>
Alguns CSS muito básicos:
#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
E organize um evento jQuery:
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
Agora, sempre que escolher alguma coisa da opção, ela irá encontrar automaticamente uma célula com o texto correspondente, permitindo-lhe subverter todo o processo id-based. Claro, se quiseres. faça-o dessa forma, você poderia facilmente modificar o script para usar IDs em vez de valores, dizendo
.filter("#"+useVal)
E certifique-se de adicionar as identificações apropriadamente. Espero que isto ajude!
Editar:
Se estás a dizer que estás a mudá-lo de um elemento aninhado, não precisas da identificação. Você pode fazer isso em vez disso:$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Resposta Original:
$('#td_id').removeClass('change_me').addClass('some_other_class');
Outra opção é:
$('#td_id').toggleClass('change_me some_other_class');
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
No caso de já ter uma classe e precisar de alternar entre classes como opondo para adicionar uma classe, poderá alternar eventos:
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
$('#td_id').attr('class','new class');
É melhor eu usar o .prop para mudar o nome da classe e funcionou perfeitamente:
$(#td_id).prop('className','newClass');
Para esta linha de código, basta mudar o nome da newClass, e, claro, o id do elemento, no próximo exemplo : idelementinyourpage
$(#idelementinyourpage).prop('className','newClass');
A propósito, quando quiser procurar qual o estilo que é aplicado a qualquer elemento, basta carregar em F12 no seu navegador quando a sua página é mostrada e seleccionar na página do DOM Explorer o elemento que deseja ver. Em estilos você agora pode veja que estilos são aplicados ao seu elemento e a partir de que Classe sua leitura.