Ik wil de klasse van een td-tag wijzigen met de id van de td-tag:
<td id="td_id" class="change_me"> ...
Ik wil dit kunnen doen terwijl ik in de click-gebeurtenis van een ander dom-object zit. Hoe pak ik de td’s id en verander de klasse?
Antwoord 1, autoriteit 100%
jQuerygebruiken
Je kunt de klas instellen(ongeacht wat het was) met .attr(), zoals dit:
$("#td_id").attr('class', 'newClass');
Als je een klas wilt toevoegen, gebruik dan .addclass()in plaats daarvan, als volgt:
$("#td_id").addClass('newClass');
Of een korte manier om klassen te wisselen met .toggleClass():
$("#td_id").toggleClass('change_me newClass');
Hier is de volledige lijst met jQuery-methoden specifiek voor de classkenmerk.
Antwoord 2, autoriteit 13%
Ik denk dat je dit zoekt:
$('#td_id').removeClass('change_me').addClass('new_class');
Antwoord 3, autoriteit 4%
Ik denk dat hij een klasnaam wil vervangen.
Zoiets zou werken:
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
van http://monstertut.com/2012/06/Suse-jQuery -To-Change-CSS-klasse /
Antwoord 4
U kunt dit doen:
$("#td_id").removeClass('Old_class');
$("#td_id").addClass('New_class');
Of u kunt dit doen
$("#td_id").removeClass('Old_class').addClass('New_class');
Antwoord 5
Dus je wilt het veranderen als het klikt … laat me het hele proces doorlopen.
Laten we aannemen dat uw “extern DOM-object” een invoer is, zoals een Select:
Laten we beginnen met deze 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>
Enkele zeer eenvoudige CSS:
#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
en stel een jQuery-evenement in:
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
Als je nu iets uit de selectie kiest, vindt het automatisch een cel met de overeenkomende tekst, zodat je het hele op ID’s gebaseerde proces kunt ondermijnen. Als je het op die manier wilt doen, kun je het script natuurlijk gemakkelijk aanpassen om ID’s te gebruiken in plaats van waarden door te zeggen
.filter("#"+useVal)
en zorg ervoor dat u de id’s op de juiste manier toevoegt. Ik hoop dat dit helpt!
Antwoord 6
Je kunt addClassof toggleClass
Antwoord 7
BEWERKEN:
Als je zegt dat je het wijzigt van een genestelement, heb je de ID helemaal niet nodig. U kunt dit in plaats daarvan doen:
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Oorspronkelijk antwoord:
$('#td_id').removeClass('change_me').addClass('some_other_class');
Een andere optie is:
$('#td_id').toggleClass('change_me some_other_class');
Antwoord 8
In het geval dat je al een klas hebt en je tussen lessen moet wisselen in plaats van een klas toe te voegen, kun je gebeurtenissen aaneenschakelen:
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
Antwoord 9
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
Antwoord 10
deze methode werkt goed voor mij
$('#td_id').attr('class','new class');
Antwoord 11
van klasse veranderen met jQuery
probeer dit
$('#selector_id').attr('class','new class');
u kunt ook elk kenmerk instellen met deze zoekopdracht
$('#selector_id').attr('Attribute Name','Attribute Value');
Antwoord 12
Hier is de oplossing met jQuery:
$(document).ready(function(){
if($('#td_id').hasClass('change_me')) {
$('#td_id').removeClass('change_me').addClass('something_else');
}
});
Antwoord 13
Ik kan beter de .prop gebruiken om de className te wijzigen en het werkte perfect:
$(#td_id).prop('className','newClass');
Voor deze regel code hoeft u gewoon de naam van de newclass te wijzigen, en natuurlijk de ID van het element, in de volgende voorbeeld: Idelementinyourpage
$(#idelementinyourpage).prop('className','newClass');
Trouwens, wanneer u wilt zoeken welke stijl wordt toegepast op elk element, klikt u nogmaals op F12 in uw browser wanneer uw pagina wordt weergegeven en selecteert u vervolgens op het tabblad DOM Explorer, het element dat u wilt zien. In stijlen kan u nu zien welke stijlen worden toegepast op uw element en van welke klasse is het lezen.