프로그래밍/JAVASCRIPT
[JQuery] Object의 클래스(Class) 포함 여부를 확인
님투
2019. 10. 22. 09:38
반응형
<tr class="<?php echo $bg; ?> toggle-class"
id="tr-<?php echo $row['bt_no']?>"
data-mbid="<?php echo $row['mb_id']?>"
data-mbno="<?php echo $row['mb_no']?>"
data-mbnick="<?php echo $row['mb_nick']?>"
>
와 같은 HTML 코드에 toggle-class 가 있는지 없는지를 검사해서 토글 옵션으로 속성 제어
.toggle-class {
text-decoration:underline; /* 아래 밑줄 */
color: #EA7C02;
}
/*
* TR의 ID가 : tr-<?php echo $row['bt_no']?> tr-2000 이라고 한다면
* 각 TR의 ID 값을 지정한다.
*/
$(".class-toggle").click(function() { // class-toggle 를 클릭 했을 경우
var tr = $(this).closest('tr');
var tr_id = tr.attr('id');
var mb_no = $("#"+tr_id).data('mb_no');
var mb_id = $("#"+tr_id).data('mb_id');
var mb_nick = $("#"+tr_id).data('mb_nick');
/*
* toggle-class 속성에 따라 토글
*/
if($("#"+tr_id).hasClass("toggle-class") === true) {
$("#"+tr_id).removeClass('toggle-class');
}else{
$("#"+tr_id).addClass('toggle-class');
}
});
// js 함수
if($("#"+tr_id).is(".togglie-class") === true) {
// 속성값이 존재함.
}
// length 속성체크
if($("#"+tr_id+".togglie-class").length) {
// 속성값이 존재함.
}
코드 성능비교 사이트
http://jindo.dev.naver.com/jsMatch/index.html
jsMatch - Match Your Source Code!
각 코드를 실행하기 전에 수행되는 코드 입니다. 배열 설정이나 element 추가 같은 내용을 담을 수 있습니다. this 객체에 넣게 되면 비교 코드에서 this 객체로 접근하여 사용할 수 있습니다. 각 코드를 실행한 후에 수행되는 코드 입니다. element 제거 같은 후처리를 위한 내용을 담을 수 있습니다.
jindo.dev.naver.com
이글의 원본 글
[JQuery] Object의 특정 클래스(Class) 포함 여부를 확인하는 다양한 방법.
JQuery를 통해 Javascript 코드 상에 HTML 객체(Object)를 제어하는 경우가 많이 있습니다. 이 때에 객체의 특정 class 값을 이용하여 다수의 객체에 동시 접근하여 제어를 하거나 한 번에 동일한 CSS를 적용하는..
ooz.co.kr
반응형