function getIcon(id) {
var icons = {
'i8' : 'nachos1',
'i4' : 'eggs',
'i6': 'glass2',
'i5': 'drink',
'i1': 'starter',
'i2': 'steak',
'i3': 'ice-cream2',
'i10': 'carrot',
'i9': 'bread',
'i7': 'pizza',
'i11' : 'salad'
};
console.log('getIcon'); /* Wont happen */
return 'icon-'+icons[id];
}
$app = {
init: function() {
$el = $('div.el');
console.log($el.data('id')); /* i5 */
var icon = getIcon[$el.data('id')];
console.log(icon); /* undefined */
$el.text(icon);
}
}
$(function(){
$app.init();
})
div {
border: 1px solid;
display:inline-block;
margin:50px;
height: 40px;
min-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(it should be 'icon-drink')
<div class="el" data-id="i5"></div>
ID를 기반으로 아이콘 클래스를 가져 오려고합니다.
하지만이를 수행하는 함수는 항상 정의되지 않은 상태로 다시 실행되고 콘솔에 로그인하지 않습니다.
내가 뭘 놓치고 있는지 알아?
대괄호를 괄호로 바꿉니다.
getIcon[$el.data('id')]
해야한다 getIcon($el.data('id'))
대괄호는 속성 액세스를위한 것입니다. 괄호는 함수 호출을위한 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다