조건 |
.search_area .search_top input[type=text] 최초 value는 '전복죽' select change 이벤트시 value 가 BF101 = 전복죽 value 가 BF102 쇠고기야채죽 value 가 BF104 광양식바싹불고기 반상 value 가 BF105 양곱창뚝배기 switch 문 사용 |
var searchInput = $('.search_area_wrap .search_top input[type=text]');
searchInput.val('전복죽');
$('.search_area_wrap .search_top .select_wrap select').on('change', function () {
var _val = $(this).val();
console.log(_val);
switch (_val) {
case '':
searchInput.val('전복죽');
break;
case 'BF101':
searchInput.val('전복죽');
break;
case 'BF102':
searchInput.val('쇠고기야채죽');
break;
case 'BF104':
searchInput.val('광양식바싹불고기 ');
break;
case 'BF105':
searchInput.val('양곱창뚝배기');
break;
}
});
// 검색어삭제 트리거로 포커스 될때 내용지우기
$('.search_area_wrap .search_top .btn_clear').on('click', function () {
searchInput.val('').trigger('focus');
$(this).hide();
});
조건 |
searchInput에서 키를 누를때마다 searchInput 의 value 판단하여 빈칸이면 .btn_clear을 안보이게 빈칸이 아니면 보이게 |
searchInput.on('keyup', function (e) {
console.log(e.key);
});
searchInput.on('keyup', function () {
if ($(this).val()) {
$('.search_area_wrap .search_top .btn_clear').show();
} else {
$('.search_area_wrap .search_top .btn_clear').hide();
}
});
'jQuery > jQuery 기본' 카테고리의 다른 글
파비콘 돌아가게 만들기 ( 배열 or 변수) (0) | 2022.12.07 |
---|---|
제이쿼리 gnb 아코디언 전체메뉴 만들기 (0) | 2022.12.02 |
제이쿼리 데이터값 가져오기 data (필터기능) (0) | 2022.11.23 |
제이쿼리 주요 메서드 요소 정리 (1) | 2022.11.23 |
lnb depth02 구조 제이쿼리 클래스 걸기 (0) | 2022.11.22 |
댓글