CodeHoon

안녕하세요 상훈입니다. 

jQuery - Handlebars.js 를 사용하는데, 다 제대로 한 것 같은데, 아래와 같은 에러를 내뱉습니다.

요놈의 핸들바는 불친절하게 에러를 좀 내뱉는 것 같습니다.

Handlebars Pass a string or Handlebars AST to Handlebars compile ...

undefined 오류도 포함합니다.

확인사항

1. 실제 값이 undefinded 인지.
2. 컴파일 하려는 id의 값과 html-script-handlebar 의 id 를 일치시켰는지 여부
3. 해당 script를 포함하고 싶은 태그가 렌더링 되고 난 이후에 작성이 되었는지 여부

저는 3번에 해당하는 것이었습니다.

<div id="handlebarExample">
	<script id="handlebarExampleTarget" handlebar...></script>
</div>

이렇게 작성을 했었는데, 인식이 안되더라구요.

그래서 해당 <div>의 속을 비워주고, script를 아래로 내려주었더니 해결되었습니다.

<div id="handlebarExample"></div>
...
<script id="handlebarExampleTarget" handlebar...></script>

아무래도 완전히 컴파일이 되기 전에 script가 동작하게 되어 일어난 현상이 아닐까 싶습니다. 

2시간동안 헤매었는데, 논리상 오류가 없다보니 위치를 고려하지 못했었습니다.

이상입니다.

안녕하세요 상훈입니다.

jQuery - Swiper 를 사용하는데, activeIndex가 뭐지?  slideChange는 어떻게 사용하는것이지? 라는 의문이 들어 찾아보고 메모합니다.

일단 기본적으로 적용시킨것들은 이미 하셨다고 생각하고 넘어가도록 하겠습니다.

1. activeIndex 

var swiperExample = new Swiper(".swiper-container", {
	
    ...
     
});

이런 swiper가 있을 때, activeIndex는 간단하게 얻을 수 있습니다.

const swiperIndex = swiperExample.activeIndex

이렇게하면 현재 활성화되어있는 swiper의 번호를 얻을 수 있습니다.

2.slideChange

슬라이드가 변할 때 특정 동작을 실행합니다.

var swiperIndex;

var swiperExample = new Swiper(".swiper-container", {
	
    ...
     
    on: {
    	slideChnage: function () {
        	alert(this.realIndex);
        }
    }
});

slideChange 가 동작할 때마다 alert이 출력될 것 입니다.

이상입니다.

안녕하세요 상훈입니다. 

제이쿼리의 $.extend를 처음 보게 된다면 당황하셨을 수도 있습니다. 하지만 간단한 내용이라는 것을 알아주시기 바랍니다.

객체 A, B가 있다면,
$.extend(A, B) 는 A뒤에 B를 합치는 활동이라고 볼 수 있습니다.

여러개의 객체를 extend 내부에 넣을 수 있습니다.

const A = {age: 12, weight: 52} 
const B = {name: '상훈', height: 200}

const C = $.extend(A,B) // {age: 12, weight: 52, name: '상훈', height: 200}

만약 중복되는 key값을 가지고 있다면, "뒤"에서 덮어씌워집니다.

const A = {age: 12, weight: 52} 
const B = {name: '상훈', height: 200, age: 30}

const C = $.extend(A,B) // {age: 30, weight: 52, name: '상훈', height: 200}

이렇게 age가 뒤에 넣은 객체 B의 값으로 변한 것을 확인할 수 있습니다.

이상입니다.

안녕하세요 상훈입니다. 

제이쿼리를 이용하여 (1) radio 버튼이 체크되어있는지 여부, (2) 체크 되어있는 값을 가져오기의 예제를 작성해보도록하겠습니다.

html

<input type="radio" name="item" value="1">
<input type="radio" name="item" value="2">
<input type="radio" name="item" value="3">
<input type="radio" name="item" value="4">

이렇게 4개의 이름이 같은 radio 버튼이 존재하고, 모두 값이 다를 때,

1. 버튼이 체크 되어있는지 여부 확인하기

const itemChecked = $('input[name=item]').is('checked');

item 이라는 name 속성을 가진 radio 태그 중 체크 되어있는 것의 노드를 가져옵니다.

 2. 체크 되어있는 값을 가져오기

위를 좀 더 단축하여 사용하겠습니다.

const itemValue = $('input[name=item]:checked').val();

이렇게 item이라는 name 속성을 가진 녀석 중 체크 되어있는 노드의 값을 가져옵니다.

이상입니다.

안녕하세요 상훈입니다. 

요즘 jquery를 무척 많이 접하게 되어 저도 하나씩 모르는 것들을 알아가고 있습니다.

예를 들어... show(), hide()..? ㅋㅋㅋㅋ

제이쿼리를 이용하여 특정 버튼을 활성화 / 비활성화 하는 방법에 대해 포스팅하겠습니다.

<button type="button" id="myButton" onclick="change()" disabled>  click  </button>

위와 같이 id : myButton,  onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다.

그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요,

attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다.

1. attr()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').removeAttr('disabled');
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').removeAttr('disabled');
    } else {
    	$('#myButton').attr('disabled');
    }
}

이렇게 하는 방법이 있구요~

2. prop()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').prop('disabled', false); // 비활성을 비활성 = -1 x -1 와 같음
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').prop('disabled', false);
    } else {
    	$('#myButton').prop('disabled', true);
    }
}

이렇게 사용하시면 됩니다. 

Prop() 을 사용하시는 것을 권장드립니다.

이상입니다.