Quiero cambiar la clase de una etiqueta td dado id de la etiqueta td:jQuery nombre de la clase de cambio
<td id="td_id" class="change_me"> ...
Quiero ser capaz de hacer esto mientras que dentro del evento click de algún otro objeto DOM. ¿Cómo tomo la identificación de la td y cambio su clase?
Usted puede establecer la clase (independientemente de lo que era) mediante el uso de .attr(), así:
$("#td_id").attr('class', 'newClass');
Si desea añadir una clase, utilice .addclass() lugar, como este :
$("#td_id").addClass('newClass');
O un camino corto para intercambiar clases utilizando .toggleClass():
$("#td_id").toggleClass('change_me newClass');
Here's the full list of jQuery methods specifically for the class attribute.
EDIT:
Si usted está diciendo que usted está cambiando desde un elemento anidado, que no necesita el ID en absoluto. Usted puede hacer esto en su lugar:
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Respuesta original:
$('#td_id').removeClass('change_me').addClass('some_other_class');
Otra opción es:
$('#td_id').toggleClass('change_me some_other_class');
No creo que el OP esté dentro del'
@Nick - Sí, yo agregué la actualización porque la leí nuevamente y vi que OP me preguntaba: "¿Cómo puedo tomar la identificación del td y cambiar ...?". Esto me llevó a creer que OP no maneja la ID, lo que haría que mi respuesta original no fuera muy útil.Dado esto, supongo que el elemento con el controlador está anidado. Pero ciertamente es una suposición. – user113716
Creo que estás buscando este:
$('#td_id').removeClass('change_me').addClass('new_class');
Se puede extraer de addClass o toggleClass
Así que usted quiere cambiarlo cuando se hace clic en él .. . Déjame pasar por todo el proceso. Vamos a suponer que su "objeto DOM externa" es una entrada, al igual que un selecto:
Vamos a empezar con este código 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>
Algunos CSS muy básico:
#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
Y pusieron un evento jQuery:
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
Ahora, cada vez que seleccione algo de la selección, lo hará Busque automáticamente una celda con el texto correspondiente, lo que le permite subvertir todo el proceso basado en el ID. Por supuesto, si desea hacerlo de esa manera, usted puede fácilmente modificar el script para utilizar los ID en lugar de valores diciendo
.filter("#"+useVal)
y asegúrese de agregar los identificadores de manera apropiada. ¡Espero que esto ayude!
Creo que quiere reemplazar un nombre de clase.
Algo como esto funcionaría:
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
de http://monstertut.com/2012/06/use-jquery-to-change-css-class/
Pero quería hacerlo dentro del evento click de algún otro objeto dom – keyser
usted puede hacer esto: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); O usted puede hacer esto
$("#td_id").removeClass('Old_class').addClass('New_class');
En el caso de que ya tiene una clase y necesita alternar entre clases para oponerse para agregar una clase, puede encadenar eventos de alternancia:
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
este método funciona bien para mí
$('#td_id').attr('class','new class');
Haga algunos detalles al respecto. – aircraft
Hey @ Nick, agregar un controlador de eventos que se encuentra la primera [ 'var $ td = $ (this) .parents padres td (' td: first ') '] luego obtiene su id [' var id = $ td.attr (' id '); '] y también la clase [' var class = $ td.attr (' class '); '] porque él quiere un elemento de clic dentro del TD para activarlo –
@Bob - No sigo, ¿de dónde sacas eso, otra pregunta? Este dice que tiene el ID del elemento :) También para obtener un padre puede usar '.closest ('td')' en lugar de '.parents ('td: first')' :) –
su última frase: ' Quiero poder hacer esto mientras estoy dentro del evento click de algún otro objeto dom. ¿Cómo puedo tomar la identificación del td y cambiar su clase? '- tal vez estoy leyendo mal, tal vez quiere decir usar el ID del td para cambiar la clase ... –