jQuery 클래스 이름 변경
td 태그의 ID를 고려하여 td 태그의 클래스를 변경하고 싶습니다.
<td id="td_id" class="change_me"> ...
저는 다른 돔 객체의 클릭 이벤트 안에서 이 작업을 수행할 수 있기를 원합니다.td의 id를 잡고 클래스를 변경하려면 어떻게 해야 합니까?
사용.jQuery다음과 같이 를 사용하여 클래스를 설정할 수 있습니다.
$("#td_id").attr('class', 'newClass');
클래스를 추가하려면 다음과 같이 사용합니다.
$("#td_id").addClass('newClass');
또는 다음을 사용하여 클래스를 전환하는 간단한 방법:
$("#td_id").toggleClass('change_me newClass');
다음은 속성에 대한 jQuery 메서드의 전체 목록입니다.
당신은 이것을 찾고 있는 것 같습니다.
$('#td_id').removeClass('change_me').addClass('new_class');
그는 학급 이름을 바꾸고 싶어하는 것 같습니다.
다음과 같은 방법이 가능합니다.
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
http://monstertut.com/2012/06/use-jquery-to-change-css-class/ 에서
수행할 수 있는 작업:$("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class');또는 이 작업을 수행할 수 있습니다.
$("#td_id").removeClass('Old_class').addClass('New_class');
그래서 당신은 그것을 클릭할 때 바꾸고 싶어요...모든 과정을 살펴보도록 하겠습니다."외부 DOM 개체"가 선택과 같은 입력이라고 가정합니다.
다음 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>
몇 가지 매우 기본적인 CSS:
#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
jQuery 이벤트를 설정합니다.
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
이제 선택 항목에서 항목을 선택할 때마다 일치하는 텍스트가 있는 셀이 자동으로 검색되므로 전체 ID 기반 프로세스를 뒤집을 수 있습니다.물론, 만약 당신이 그렇게 하기를 원한다면, 당신은 쉽게 스크립트를 값이 아닌 ID를 사용하도록 수정할 수 있습니다.
.filter("#"+useVal)
ID를 적절하게 추가해야 합니다.이것이 도움이 되길 바랍니다!
addClass를 체크아웃하거나 Class를 전환할 수 있습니다.
편집:
중첩된 요소에서 변경하는 경우에는 ID가 전혀 필요하지 않습니다.대신 다음 작업을 수행할 수 있습니다.
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
원답:
$('#td_id').removeClass('change_me').addClass('some_other_class');
다른 옵션은 다음과 같습니다.
$('#td_id').toggleClass('change_me some_other_class');
클래스가 이미 있고 클래스를 추가하기 위해 클래스 간에 교대해야 하는 경우 다음과 같이 전환 이벤트를 체인으로 연결할 수 있습니다.
$('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');
});
이 방법은 저에게 잘 맞습니다.
$('#td_id').attr('class','new class');
jquery를 사용하여 클래스 변경
이것을 먹어보세요.
$('#selector_id').attr('class','new class');
또한 이 쿼리를 사용하여 모든 속성을 설정할 수 있습니다.
$('#selector_id').attr('Attribute Name','Attribute Value');
다음은 다음을 사용하는 솔루션입니다.jQuery:
$(document).ready(function(){
if($('#td_id').hasClass('change_me')) {
$('#td_id').removeClass('change_me').addClass('something_else');
}
});
.prop을 사용하여 className을 변경해야 하는데 완벽하게 작동했습니다.
$(#td_id).prop('className','newClass');
이 코드 라인의 경우 다음 예제에서 newClass의 이름과 당연히 요소의 id를 변경하면 됩니다. idelement in your page
$(#idelementinyourpage).prop('className','newClass');
참고로, 어떤 스타일이 어떤 요소에 적용되었는지 검색하고 싶을 때, 당신의 페이지가 표시될 때 당신은 브라우저에서 F12를 클릭하고, 그리고 당신이 보고 싶은 요소인 DOM 탐색기의 탭에서 선택하면 됩니다.스타일에서 요소에 어떤 스타일이 적용되고 어떤 클래스에서 읽는지 확인할 수 있습니다.
언급URL : https://stackoverflow.com/questions/3452778/jquery-change-class-name
'programing' 카테고리의 다른 글
| 클래스 경로에서 HTML 파일을 로드하는 스프링 부트 타임리프 (0) | 2023.07.11 |
|---|---|
| 재사용 가능하고 동적인 탭 메뉴를 생성하는 데 사용하는 v-for 내부 구성 요소 사용 (0) | 2023.07.11 |
| ON 키워드 없이 INNER JOIN이 가능한가요? (0) | 2023.07.11 |
| 각도2:잡히지 않음(약속):구성 요소에서 평가!에 대한 견적이 지원되지 않습니다. (0) | 2023.07.11 |
| 복합 기본 키 참조 (0) | 2023.07.11 |