css속성값 조건문
본문
latest스킨 for문이 아래와 같습니다.
<ul class="bjqs">
<?php for ($i=0; $i<count($list); $i++) {
$j = $i + 1;
?>
<li>
<div class="mention1"></div>
<div class="mention2"></div>
<div class="mention3"></div>
</li>
<?php } ?>
</ul>
하려는 것은
ul.bjqs 이 left 속성값이 로딩되면서 -1100px,
그리고 -2200px; -3300px; 다시 -1100px... 이런식으로 반복되는 방식의 스킨인데요,
ul.bjqs의 left속성값의 변화에 따라
mention1,2,3중 하나만 안보이게 하려고
아래와 같이 jQuery를 했는데
문제는 로딩시에 left값이 -1100px이어서 첫번째 적용되고
이후 바뀌는 left값을 캐치를 못하고 있는데 무슨 방법이 없을까요?
$(document).ready(function(){
if($("ul.bjqs").css('left')=="-1100px"){
$(".mention1").hide("fast");
}else{
$(".mention1").show("fast");
}
if($("ul.bjqs").css('left')=="-2200px"){
$(".mention2").hide("fast");
}else{
$(".mention2").show("fast");
}
if($("ul.bjqs").css('left')=="-3300px"){
$(".mention3").hide("fast");
}else{
$(".mention3").show("fast");
}
});
답변 3
<div class="mention1"></div> <div class="mention2"></div> <div class="mention3"></div>
어떤타입인지 정확히 모르지만 위 3개가 로드되나요?
1,2,3을 그냥 <?php echo $i;?>로 바꾸시고 1개 로드 3개 출력으로 해보심이 어떨까요
네 3개 동시에 로드되고 나서 ul.bjqs 의 left 속성이 바뀌는것에 따라 하나씩 가릴려는 겁니다.
ul.bjqs 의 left값은 딱 3개 뿐이구요.^^
한번밖에 로딩이 안되니깐 로딩된후 바뀌는 값을 감지해야할것 같은데... 한참 찾고만 있네요~ㅎ
감사합니다.
bjqs 의 left 속성이 어떻게 바뀌게 되어 있나요?
아래처럼 슬라이드의 width값 만큼 바뀝니다. width 1100px입니다.
$slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){
state.currentslide = state.nextslide;
state.currentindex = state.nextindex;
// is the current slide a clone?
if($slides.eq(state.currentindex).attr('data-clone') === 'last'){
// affirmative, at the last slide (clone of first)
$slider.css({'left': -state.slidewidth });
state.currentslide = 2;
state.currentindex = 1;
}
else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){
// affirmative, at the fist slide (clone of last)
$slider.css({'left': -state.slidewidth *(state.slidecount - 2)});
state.currentslide = state.slidecount - 1;
state.currentindex = state.slidecount - 2;
}
state.animating = false;
});
if(slider.eq(state.currentindex).attr('data-clone') === 'last'){
// 1
} else if(slider.eq(state.currentindex).attr('data-clone') === 'first'){
// 2
} else {
// 3
}
해당 플러그인을 몰라서 테스트는 못해봤지만
1,2,3 각 부분에 show, hide 를 추가하면 어떨까 싶네요
<script>
$(document).ready(function(){
if($("ul.bjqs").css('left')=="-1100px").change(function(){
$(".mention1").css('display')=="none");
}
});
</script>
이렇게도 해봤는데 안되네요.
