$(".tab-button")
.eq(0)
.on("click", function () {
$(".tab-button").removeClass("orange");
$(".tab-button").eq(0).addClass("orange");
$(".tab-content").removeClass("show");
$(".tab-content").eq(0).addClass("show");
});
$(".tab-button")
.eq(1)
.on("click", function () {
$(".tab-button").removeClass("orange");
$(".tab-button").eq(1).addClass("orange");
$(".tab-content").removeClass("show");
$(".tab-content").eq(1).addClass("show");
});
$(".tab-button").eq(2).on("click", function(){tab(2)});
function tab(num) {
$(".tab-button").removeClass("orange");
$(".tab-button").eq(num).addClass("orange");
$(".tab-content").removeClass("show");
$(".tab-content").eq(num).addClass("show");
}
일단, function() { tab(2) }에서
그냥 tab(2)를 한다고 되는게 아니었음.
function을 써주고() {tab(2)}를 해야 콜백함수로서 실행이 되는 것 같음.
생각해보면 () => {}이렇게 했엇으니까.. 함수를 바로쓰는게 아니다..!
좋은 코드의 기준
1. 원하는 기능이 잘 구현되었는가
2. 확장성좋은가
3. 나중에 관리가 쉬울 것인가
4. 성능문제 없는가
이벤트 버블링이란?
html요소에 이벤트가 발생했을 때, 그 상위 요소들에도 모두 해당 이벤트가 적용되는 것
<aa>
<b></b>
</aa>
b에 이벤트가 발생했을 때, aa도 이벤트가 발생했다고 받아들임.
그래서 aa안에있는 다른 요소들 어디를 클릭해도, show class가 사라지면서, 없어진 것임.
그래서 b에 이벤트가 일어나도 그 상위 태그들에 이벤트가 아니예요~ 라고 막아주는 것이 필요
그래서
이벤트리스너 안에서 쓰는 이벤트 함수들
document.querySelector('.black-bg').addEventListener('click', function(e){
e.target;
e.currentTarget;
e.preventDefault();
e.stopPropagation();
})이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면
이벤트관련 유용한 함수들을 사용가능합니다.
파라미터 이름은 아무렇게나 작명하면 됩니다. 보통 대충 e라고 함
e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
몇개만 뽑아봤는데 필요할 때 가져다가 쓰면 됩니다.
e.target 이런거 출력해보십쇼 진짜 그게 맞나
여기서 중요한건 e.target인데
이벤트 버블링이 일어난다고 해도
사용자가 실제로 클릭한 그 요소는 저 문법으로 찾아낼 수 있다는걸 기억해둡시다.
e.target.classList.value === 'black-bg'는 왜안되고,
이건 될까... 아래는 그냥 쿼리자체를 비교해버리는 것.
document
.querySelector(".black-bg")
.addEventListener("click", function (e) {
if (e.target == document.querySelector(".black-bg")) {
document.querySelector(".black-bg").classList.remove("show");
}
});e도 잘 써먹자..
dataset이라는 것도 있다..
<div class="wow" data-아무거나 = "일번" >
<div class="wow" data-아무거나 = "이번" >
<div class="wow" data-아무거나 = "삼번" >
if(document.querySelector('.wow').dataset.아무거나 == "일번")
=> "일번" 나옴
이렇게!
<div class="container mt-3">
<div class="card p-3">
<span class="car-name">상품명</span>
<span class="car-price">가격</span>
</div>
</div>
<script>
var car2 = { name: "소나타", price: 50000 };
$(".car-name").html(car2.name);
$(".car-price").html(car2.price);
$(".form-select")
.eq(0)
.on("input", function () {
if (
document.querySelectorAll(".form-select")[0].value !==
"상품을 선택하세요"
) {
$(".form-select").eq(1).removeClass("not-display");
}
});이벤트 리스너를 잊지마라.
form 태그에서 select input의 경우 선택할때마다, change event나 input event가 발생한다.
그러므로 이벤트 리스너로 그런 이벤트가 발생했을 때를 주시하고 있어야한다. (클릭이 아니라 이번엔 인풋이 있는지를 본다.)
select!!!
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option>상품</option>
<option>모자</option>
<option>셔츠</option>
</select>
<select class="form-select mt-2 not-display">
<option>사이즈를 선택하세요</option>
<option>95</option>
<option>100</option>
</select>
</form> const OPTION_THUMBNAIL = "상품";
function selector(num) {
return $(".form-select").eq(num);
}
selector(0).on("input", function () {
if (selector(0).val() !== OPTION_THUMBNAIL) {
selector(1).removeClass("not-display");
}
console.log(selector(0).val());
if (selector(0).val() === OPTION_THUMBNAIL) {
selector(1).addClass("not-display");
}
});와... else로 연습안하고 넘어갓으면 모를뻔했다.
.val 이니까 계속 다시 클래스를 붙이는게 안되었는데, 보니까 .val() 로 쓰는 것임. 이걸 까먹으면 안댕...
const OPTION_THUMBNAIL = "상품";
function selector(num) {
return $(".form-select").eq(num);
}
selector(0).on("input", function () {
if (selector(0).val() !== OPTION_THUMBNAIL) {
selector(1).removeClass("not-display");
}
if (selector(0).val() === "셔츠") {
selector(1).html("");
selector(1).append("<option>95</option><option>100</option>");
}
if (selector(0).val() === "바지") {
selector(1).html("");
selector(1).append("<option>30</option><option>32</option>");
}
if (selector(0).val() === OPTION_THUMBNAIL) {
selector(1).addClass("not-display");
}
});코딩을 하면서 재밌는 점은 ,
없앤다 라는 개념이 있다면 그것을 실행하는 방법은 remove가 아닌 ,그냥 초기화거나 되돌아가거나 아무것도 없는 상태로 새로 선언하거나 등 여러가지 방법이 있다는 것이다. 목표와 그 목표를 달성하기 위한 방법이 직선적이고 1대1대응이 아니라는 점을 기억해야겠어.