제이쿼리,자바스크립트 초보 if문 질문합니다
본문
풀페이지로 홈페이지를 제작하고 있습니다.
section1에서는 햄버거메뉴를 누를시 header가 투명, 햄버거 버튼이 white만 출력이 되면되고
그 이외 section2부터는 햄버거 버튼을 안누를시 header가 white, 햄버거버튼이black
햄버거 버튼을 누를시 header가 투명, 햄버거버튼이 white 가 되면되는 조건으로 제이쿼리구문을 작성했는데
2페이지 이외에서 작동이 잘되다가 안되다가해서요 혹시 제가 구문을 잘못작성했다면 알려주세요.
<script>
$(document).ready(function() {
// fullpage
$('#fullpage').fullpage({
autoScrolling: true,
scrollHorizontally: true,
bigSectionsDestination: top,
anchors: ['sec1', 'sec2', 'sec3'],
menu: '#menu',
scrollingSpeed: 1000,
scrollBar: false,
onLeave: function(origin, destination, direction) {
// 빠른전환으로 이벤트중복시 fullpage와 swiper전환시점 분리막기
$('#fullpage').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
swiper.mousewheel.disable();
},
afterLoad: function(anchorLink, index) {
// TODO: 2022-12-16 페이지별 콜백
var url='../images/logowe.png';
if (index == 1){ // 1페이지
var url='../images/logow.png';
$('.gnb').find('a').css('color', '#fff');
$('#header').css('background-color','transparent');
$('.hamburger_menu span').css('background-color','white');
$('.logo').html(`<img src='${url}'>`);
$('.hamburger_menu').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {$('#header').css('background-color','transparent');
$('.hamburger_menu span').css('background-color','white');
// odd clicks
} else {$('#header').css('background-color','transparent');
$('.hamburger_menu span').css('background-color','white');
// even clicks
}
});
} else {
var url='../images/logowe.png';
$('.gnb').find('a').css('color', '#000');
$('#header').css('background-color','white','transition:0.1s');
$('.hamburger_menu span').css('background-color','black');
$('.logo').html(`<img src='${url}'>`);
$('.hamburger_menu').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {$('#header').css('background-color','white');
$('.hamburger_menu span').css('background-color','black');
// odd clicks
} else {$('#header').css('background-color','transparent');
$('.hamburger_menu span').css('background-color','white');
// even clicks
}
});
}
// 전환이 끝난후 이벤트풀기
$('#fullpage').off('scroll mousewheel');
if(!$(".fp-completely .swiper-wrapper").length > 0) $('#fullpage').off('touchmove'); // 모바일분기
if(swiper) swiper.mousewheel.enable();
if(!$(".sec1").hasClass("active")) $.fn.fullpage.setAllowScrolling(true); // 슬라이드 섹션을 벗어나면 휠풀어주기
}
});
// swiper
var length = $(".sec1 .swiper-slide").length;
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
effect:'fade',
freeMode: false,
speed: 3000,
// 3초마다 자동으로 슬라이드가 넘어갑니다. 1초 = 1000
autoplay: {
delay: 3000,
},
navigation : {
nextEl : '.swiper-button-next', // 다음 버튼 클래스명
prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
mousewheel: false,
on: {
slideChange: function(){
var idx = this.activeIndex;
// 처음과 마지막 슬라이드가 아닐경우 fullpage전환 막기
if(this.activeIndex != 0 && idx != length) $.fn.fullpage.setAllowScrolling(false);
if(length == 2 && idx == 0) $.fn.fullpage.setAllowScrolling(false) //슬라이드가 2개밖에 없을때
// console.log('즉시 : ' + idx);
},
slideChangeTransitionEnd: function(){
var idx = this.activeIndex;
// 처음과 마지막 슬라이드일 경우 fullpage전환 풀기
if(idx == 0 || idx >= length-1) $.fn.fullpage.setAllowScrolling(true);
// console.log('전환후 : ' + idx);
},
touchMove: function(e) {
var startY = e.touches.startY;
setTimeout(function(){
if(startY > e.touches.currentY) swiper.slideNext();
else swiper.slidePrev();
},100);
},
},
});
});
</script>
답변 1
} else {
var url='../images/logowe.png';
$('.gnb').find('a').css('color', '#000');
$('#header').css('background-color','white','transition:0.1s');
$('.hamburger_menu span').css('background-color','black');
$('.logo').html(`<img src='${url}'>`);
$('.hamburger_menu').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('#header').css('background-color','transparent');
$('.hamburger_menu span').css('background-color','white');
// odd clicks
} else {
$('#header').css('background-color','white');
$('.hamburger_menu span').css('background-color','black');
// even clicks
}
});
}
클릭에 반응하는 if문 구간이 반대로 되어 있어서 그런건 아닐까요?
답변을 작성하시기 전에 로그인 해주세요.
