인프런 커뮤니티 질문&답변
작성한 질문수
복습 중에 제이쿼리가 작동을 안합니다...
해결된 질문
작성
·
539
답변 2
1
태그 선택자와 클래스 선택자가 혼용되는 선택자 지정방식의 문제입니다.
아래에 있는 2가지 중 1가지 방식으로 하시면 됩니다.
가급적이면 2번째 방식이 일반적입니다.
태그선택자 .container div {}로 된 것에 클래스가 붙으면서 .container div.active {} 되지만 태그선택자 .container div에 있는 배경색 background-color: dodgerblue를 .active 들어가지만 작동이 안된겁니다.
.container div에 있는 배경색 background-color: dodgerblue가 최초에 없으면 .active에 따라 색상이 들어가고 빠지고 합니다.
.active는 범용으로 사용되는 대표적인 클래스네임이기 때문에 .container div.active {} 이런 식으로 특정 선택자로 만들어 놓는 것이 좋습니다.
!important는 선택자 지정방식 관계없이 최우선으로 적용하라는건데 가급적이면 !important 사용이 잦은건 좋지 않습니다.
1번 방식)
.active {
background-color: yellow !important;
}
2번 방식)
.container div.active {}
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jquery review</title>
<style>
a {
color: gray;
text-decoration: none;
font-weight: bold;
font-size: 14px;
display: inline-block;
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
margin: 3px;
background-color: beige;
border-radius: 5px;
}
.container div {
width: 300px;
height: 300px;
background-color: dodgerblue;
border-radius: 5px;
text-align: center;
font-weight: bold;
line-height: 300px;
margin-top: 7px;
color: white;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<a href="#none" class="add-btn">add-btn</a>
<a href="#none" class="remove-btn">remove-btn</a>
<a href="#none" class="toggle-btn">toggle-btn</a>
<div>box</div>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/customreview.js"></script>
</body>
</html>
여기요..! 제이쿼리는 밑에 있습니다.
$('.add-btn').click(function(){
$('.container div').addClass('active');
});
$('.remove-btn').click(function(){
$('.container div').removeClass('active');
});
$('.toggle-btn').click(function(){
$('.container div').toggleClass('active');
});
와! 해결됐습니다! 늦은 시간에 답변 감사합니다! :)