[JQUERY]show(), hide(), toggle()

hae111·2022년 5월 15일
0

html 레이아웃을 숨기거나 보여줄때 사용하는 메서드

$('#id').show;;
$('#id').hide;
$('#id').toggle("show");

toggle
: 화면이 보여주면 반대로 감춰주고 화면이 감춰지면 반대로 보여주는 메서드이다. 함수에서 show와 hide가 작동이 안될때 사용하면 작동이 된다.

스크립트 코드 간소화

//검사타입에 따른 추가입력 사항 레이아웃 추가
$("select[name=test_type]").change(function () {
	var test_type = $("select[name=test_type] option:selected").val();

	if (test_type == 'a') {
	    $('#a_type').show();
	    $('#a_type').hide();
	    $('#a_type').hide();
	    $('#a_type').hide();
	} else if (test_type == 'b') {
	    $('#b_type').show();
	    $('#b_type').hide();
	    $('#b_type').hide();
	    $('#b_type').hide();

일일히 테스트 타입을 확인해서 레이아웃을 닫고 보여주는 코드를 작성했다. 그런데 타입이 많아지면 코드가 길어지게 되어서 비효율적이다.

$("select[name=test_type]").change(function () {
	var test_type = $("select[name=test_type] option:selected").val();

	$("form[name=questForm1]").find("table tr#" + test_type).css("display", "");
	$("form[name=questForm1]").find("table tr.addInfo").not("#" + test_type).css("display", "none");

form의 테스트타입을 찾아서 레이아웃을 보여주고 아닌 타입은 none으로 감춰버리면 코드가 간소화 된다.

0개의 댓글