show & hide 메소드를 문자열로 이용하는 방법

show, hide 메소드를 객체의 대괄호 접근 표기법 이용하기

show, hide 메소드와 객체 리터럴 대괄호 접근 표현식

아래와 같은 마크업에 클릭을 했을 경우 div 박스가 보여주고 감추는 토글 기능을 구현하고자 합니다.

html

<p><a href="#none">클릭</a></p>
<div> box </div>

<style type="text/css">
    div { width: 200px; height: 200px; background: #ae96ff;}
</style>

javascript

var $target = $('p > a');
$target.on('click',function () {
    var target = $('div');
    target[target.css('display') == 'block' ? 'hide' : 'show']();
    return false;
})

위 스크립트를 분석해 보면 target[] 인 객체 대괄호 접근표기법 안에 삼항 연산자가 작성되어 있습니다.

삼항 연산자 결과로 target.hide 또는 target.show 를 반환하게 됩니다.

그 반환된 결과를 즉시호출하여 target.hide() 또는 target.show() 가 실행되게 됩니다.

다음 결과창에서 확인하기

See the Pen 객체 접근연산자를 이용한 show,hide 메소드 by jaeheekim (@jaehee) on CodePen.

Jaehee's e-room