묻고답하기
닫기버튼 오류 도와주세요
2017.02.05 16:36
addClass,removeClass를 이용해 간단한 팝업갤러리를 만들었는데
닫기버튼이 실행이 안되요
span tag 안에 닫기 버튼을 만들었는데 실행이 안되네요
span tag의 parents 나 closest등을 이용해서도 해봤는데
css나 다른 method들을 모두 실행이 되는데 오로지 removeClass는 실행이 안되요
고수님들 꼭 부탁드려요
도와주세요~~~~ ㅠㅠ
popup.js 내용입니다.
---------------------------------------------------------------------------------------------
$(function(){
$('section>ul>li').on('click',function(){
$('section>ul>li').removeClass('on');
$(this).addClass('on');
});
$('span').on('click',function(){
// $('section>ul>li').removeClass('on');
// $('section>ul>li').css({'background':'red'});
$(this).parents('li').removeClass('on');
});
});
댓글 6
-
리즈러브
2017.02.05 19:45
parent로 해도 안되요~~선택자를 article로 하면 되야 하는거 아닌가요?
모든 아트클에 on을 제거 하는거니까.. 아닌가요>?
아니면 this선택자로 했다면 parent나 closest라도 되야 할텐데 안되는 이유가 뭘까요..
고수님들 부탁드려요...
-
리즈러브
2017.02.05 19:48
body의 내용입니다.
<div id="wrap">
<h1>portpoflio</h1>
<section>
<ul>
<li>
<div>
<img src="img/1.jpg" alt="">
<h2>list01</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, rerum?</p>
<span class='close'>close</span>
</div>
</li>
<li>
<div>
<img src="img/2.jpg" alt="">
<h2>list02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, rerum?</p>
<span class='close'>close</span>
</div>
</li><li>
<div>
<img src="img/3.jpg" alt="">
<h2>list03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, rerum?</p>
<span class='close'>close</span>
</div>
</li><li>
<div>
<img src="img/4.jpg" alt="">
<h2>list01</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, rerum?</p>
<span class='close'>close</span>
</div>
</li></ul>
</section>
</div>
css입니다.
#wrap {
position: relative;
width:100%;
height:auto;
z-index: 0;
}
h1 {
display: none;
}
section {
position: absolute;
width:900px;
height:900px;
margin-left:-450px;
left:50%;
background: #eee;
z-index: 1;
}
section>ul {
position: relative;
width:100%;
height: 100%;
z-index: 0
}
section>ul>li {
position:absolute;
width:200px;
height:300px;
top:30px;
overflow: hidden;
text-align: center;
}
section>ul>li:nth-child(1) {
left:20px;
}
section>ul>li:nth-child(2) {
left:240px;
}
section>ul>li:nth-child(3) {
left:460px;
}
section>ul>li:nth-child(4) {
left:680px;
}section>ul>li>div {
position: relative;
width:100%;
height:100%;
}section>ul>li>div img {
width:200px;
height:200px;
display: block;
border-radius: 100px;
cursor: pointer;
filter: grayscale(100%);
transition:all 0.5s;
}
section>ul>li>div img:hover {
filter:grayscale(0);}
section>ul>li>div>span {
position:absolute;
top:0;
left:-1000px;
}
section>ul>li>div>h2 {
font-size:16px;
}
section>ul>li>div>p {
display: none;
}section>ul>li.on {
position:absolute;
width:600px;
height:700px;
background: #000;
top:30px;
left:50%;
margin-left: -300px;
z-index: 3;
text-align: center;
box-shadow: 2px 2px 5px #000;
}
section>ul>li.on>div {
position: relative;
width:100%;
height:100%;
}
section>ul>li.on>div>img {
position:absolute;
width:500px;
height:500px;
display: block;
top:50px;
left:50px;
border-radius:0;
filter:grayscale(0);
}
section>ul>li.on>div>h2 {
position: absolute;
top:550px;
left:50px;
font-size:30px;
color:#fff;
}
section>ul>li.on>div>p {
position:absolute;
display: block;
top:600px;
left:50px;
font-size:12px;
color:#eee;
}
section>ul>li.on>div>span {
position:absolute;
top:10px;
left:540px;
display: block;
width:50px;
height:20px;
background:#abc;
color:#000;
cursor: pointer;
z-index: 99;
}
-
$('span').on('click',function(){
event.stopPropagation(); // span 을 클릭해도 li 안에 있기 때문에 addClass가 또 실행되는 걸 막기 위해.
$(this).parent().removeClass('on'); // this 의 parent 는 li가 아니고 Div 입니다.
$(this).parent().parent().removeClass('on'); // 이렇게 작성하면 li가 되죠.
}); -
리즈러브
2017.02.06 09:44
고맙습니다. 다시 해볼께요~~~~~
-
리즈러브
2017.02.06 09:48
고맙습니다 율랜님 해결했어요~~~~~~ ^^
$(this).parents('li').removeClass('on');
오타있네요~
parent()로 수정해보세요~