47일차 - 폼) 쇼핑몰 상세보기 목록들(배열)

밀레·2022년 11월 30일

코딩공부

목록 보기

116/135

ex) 쇼핑몰 상세보기?

시나리오

① 검색어 필드를 채우고 '저장' 클릭하면 차례대로 저장해 두었다가,
② '확인하기' 통해 한꺼번에 노출시킴

1. HTML 인풋란 작성

2. '저장하기' 버튼 클릭! 하는 제이쿼리 식 작성

근데 < button >에 class, id 없다면? (nth-child도 말고!)

그럼 뭘로 잡아서 addEventListener 해???

방법1) 버튼에 class 삽입 - addClass( ' this.index( ) ' )

같은 표현

방법2) 버튼에 id 삽입 - attr( 'id', 'btn + index순번' )

방법3) data-name으로 '컨텐츠'를 저장 - [data-nm="확인하기"]

① 콘솔창에서 확인해보기

② 버튼 순서를 바꿔보자! '확인하기' ↔ '저장'

결론 : 세번째 것이 제일 좋다! (버튼 순서 바껴도 그대로 있다였나?)

③ CSS로 확인하기 ( 데이터-네임="저장"에 경계선색 주기 )

④ 버튼 순서를 바꿔보자! '확인하기' ↔ '저장'

3. on : 실체 없는 객체 안으로 자바스크립트 식 밀어넣기

[data-nm="저장"] 은 동적객체 ( = 페이지 소스보기에 없는 애들! )

$(부모).on( 'click', '동적객체_페이지 소스보기 없는 애들', function(){
			<!-- /////////////////// -->
})

배열 선언

var stext = [ ];

'저장' 버튼을 누를 때마다 → 사용자가 input에 넣은 숫자값을 이 배열에 .push

$(부모).on( 'click', '동적객체_페이지 소스보기 없는 애들', function(){
	<!-- #search 인풋에 작성한 값을 배열에 push -->
})

4. '저장해둔 검색어는 ( stext ) 입니다' 화면 출력

4-1) html에 append 하기!

	$('#search').append('<div>저장해둔 검색어는 ' + arrnms + ' 입니다.</div>');

4-2) 오류가 난다면, 빈 배열 선언 방식 수정하기

var stext = [ ]; 대신
var stext = new Array( ); // 이게 더 좋다

근데 이 단계에서 아직 화면 출력 안됨

5. 인풋란이 비어있으면 처리 안되도록 if-else

<script>
	$('body').on('click', '[data-nm="저장"]', function(){
    
		let searchText = $('[type="text"]').val()
        
		if( searchText != '' ){
			stext.push( $('#search input').val() )
			console.log(stext);
			$('#search input').val('');
		}else{
			alert("검색어를 입력한 뒤 저장하세요")
			$('[type="text"]').focus();
		}
	})
</script>