관리 메뉴

ㄴrㅎnㅂrㄹrㄱi

[JQuery] Object의 클래스(Class) 포함 여부를 확인 본문

프로그래밍/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

이글의 원본 글

https://ooz.co.kr/245

 

[JQuery] Object의 특정 클래스(Class) 포함 여부를 확인하는 다양한 방법.

JQuery를 통해 Javascript 코드 상에 HTML 객체(Object)를 제어하는 경우가 많이 있습니다. 이 때에 객체의 특정 class 값을 이용하여 다수의 객체에 동시 접근하여 제어를 하거나 한 번에 동일한 CSS를 적용하는..

ooz.co.kr

 

반응형
Comments