jquery 변경 클래스 이름
td 태그의 ID가 주어지면 td 태그의 클래스를 변경하고 싶습니다.
<td id="td_id" class="change_me"> ...
다른 dom 객체의 click 이벤트 내부 에서이 작업을 수행 할 수 있기를 원합니다. td의 ID를 가져 와서 클래스를 변경하려면 어떻게합니까?
당신은 할 수 설정 (관계없이 어떤 클래스 였다을 사용하여) .attr()과 같이 :
$("#td_id").attr('class', 'newClass');
클래스 를 추가 하려면 .addclass()다음과 같이 대신 사용 하십시오.
$("#td_id").addClass('newClass');
또는 다음을 사용하여 클래스를 바꾸는 짧은 방법 .toggleClass():
$("#td_id").toggleClass('change_me newClass');
다음은 class속성에 대한 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');
addClass 또는 toggleClass를 확인할 수 있습니다
클릭하면 변경됩니다. 전체 프로세스를 진행하겠습니다. "외부 DOM 객체"가 select와 같은 입력이라고 가정합니다.
이 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를 적절하게 추가하십시오. 도움이 되었기를 바랍니다!
편집하다:
중첩 요소 에서 변경한다고 말하면 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');
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
클래스가 이미 있고 클래스를 추가하는 대신 클래스를 번갈아 사용해야하는 경우 토글 이벤트를 연결할 수 있습니다.
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
이 방법은 저에게 잘 작동합니다
$('#td_id').attr('class','new class');
.prop를 사용하여 className을 변경하는 것이 더 좋으며 완벽하게 작동했습니다.
$(#td_id).prop('className','newClass');
이 코드 줄에 대해서는 다음 예제에서 newClass의 이름과 물론 요소의 id를 변경해야합니다. idelementinyourpage
$(#idelementinyourpage).prop('className','newClass');
그건 그렇고, 어떤 요소에 어떤 스타일이 적용되는지 검색하려면 페이지가 표시 될 때 브라우저에서 F12를 클릭 한 다음 DOM 요소 탭에서 원하는 요소를 선택하십시오. 스타일에서 요소에 적용되는 스타일과 해당 클래스의 판독 값을 확인할 수 있습니다.
jquery를 사용하여 클래스 변경
이 시도
$('#selector_id').attr('class','new class');
이 쿼리를 사용하여 속성을 설정할 수도 있습니다
$('#selector_id').attr('Attribute Name','Attribute Value');
참고 URL : https://stackoverflow.com/questions/3452778/jquery-change-class-name
'Programing' 카테고리의 다른 글
| MySQL-쿼리 속도 테스트를 위해 캐시를 사용하지 마십시오 (0) | 2020.03.06 |
|---|---|
| 몽구스에서 문서를 어떻게 업데이트 / 업데이트합니까? (0) | 2020.03.06 |
| mysql에 원격 연결을 허용하는 방법 (0) | 2020.03.06 |
| C #에서 문자열 암호화 및 암호 해독 (0) | 2020.03.06 |
| 이름으로 쿠키 받기 (0) | 2020.03.06 |