jquery 동작에 오류가 있어 해결을 하지 못하고 이틀동안 구글링 해가며

원인이 무엇인지 찾고있지만 해결방안을 모르겠습니다.

 

제가 미천한 지식으로 구현한것은 쇼핑몰에서 스크롤시 구매정보가 고정되어 보여지는것으로.

열고닫기시 토글이 되어 움직이는 것을 제작했습니다.

 

이해하기 쉽도록 이미지를 첨부했습니다.

 

1. 카페24에서 제작했으며, 상품의 상세페이지입니다. 위 상태에서 아래로 스크롤을 내리면

z1.PNG

 

 

2. 이와 같이 하단에 구매정보가 연동되어 고정되며, [option]의 검은바를 클릭하면 아래로 내려가지게끔 만들었어요.

z2.PNG

 

 

3. 아래로 내려가지면서 옵션 열기라고 표시되고, 다시 누르면 위로 올라옵니다.

z3.PNG

 

 

 

 

여기서 문제는 간헐적으로? 스크롤을 위로 올렸다 클릭시 2번과 같은 상태에서 검은바를 눌러도 미동없이 옵션닫기, 옵션열기만 바뀌고 이 외 무반응 상태입니다.

 

 

개발자도구에서 확인시 동작 오류가 나타날때 open 값이 계속 1을 찍고있는데 이것에 대한 이유가 무엇인지 알고싶어요.

아래는 현재 적용된 소스입니다. 

 

 

[css] 
.infoArea.openLayer {background-color:#fff; position:fixed; right:10%; bottom:0px;  width:402px !important;z-index:1000; } 
.open {display:none} 
.openLayer .open { display:block; width: 370px; cursor:pointer;  height: 40px;    background-color: #000;    position: absolute;    bottom: 100%; padding: 0 20px 0 12px;        line-height: 40px;    color: #fff;} 
 

 

[html] 
<div class="infoArea"> 
<div class="oepn">option</div>  <!--  버튼 --> 
내용 
</div> 

 


[jquery] 

var top = $('.infoArea').offset().top - parseFloat($('.infoArea').css('bottom').replace(/auto/, 0)); 
$(window).scroll(function() {    

    var scroll = $(window).scrollTop(); 
    if (scroll >= 1000) { 
        $(".infoArea").addClass("openLayer"); 
    } else { 
        $(".infoArea").removeClass("openLayer"); 
    } 
    
        $(".open").click(function(){ 
        var outerHeight=$(".openLayer").outerHeight(); 
        if(open == 0){ 
            $(".openLayer").stop().animate({"bottom":0}); 
            $(".open").html('옵션 닫기'); 
            open = 1; 
        }else{ 
            $(".openLayer").stop().animate({"bottom":-513+'px'}); 
            $(".open").html('옵션 열기'); 
            open = 0; 
        } 
    }); 
}); 

 

 

// 접속해서 바로 클릭하면 열고닫기에 문제가 없으나 스크롤을 위아래로 움직이다 클릭하면 문제가 나타납니다.

새로고침후 스크롤을 위로 한번 살짝 올렸다 클릭해도 먹통이네요. 

  • profile
    $(window).scroll(function() {
    }
    이 구문은 스크롤이 될때마다 실행하는 것입니다.

    $(".open").click(function(){ }
    이것은 open이라는 클래스 명을 가진 것을 클릭했을때 동작해야 하는데
    이 동작이 스크롤 안에 들어가 있어서 있네요.

    방법은 여러가지가 있겠지만 두가지 동작이 분리되어야 할 것 같습니다.

    프로그래밍을 배우면 초반에 하는 것이 순서도를 그리는 것입니다.
    http://codingisgame.tistory.com/10

    주요 구문은 거의다 만들어져 있으므로 순서도를 그려서 정리한다음 그것으로 다시 만들어보세요.
  • profile ?
    감사합니다. 단락을 2개로 경계지어서 구분지엇더니 덕분에 해결된것으로 보이네요
    고맙습니다!!
  • ?
    버튼 클릭 이벤트 등은
    $( document ).ready(function() {
    내용
    });
    여기에 넣어주심 됩니다
  • ? ?
    $(function() { 와, $( document ).ready(function() { 차이를 모르겠습니다..
    저는 우선 $(function() {으로 감싸두었는데.. 순서상 맞는건지 모르겠네요.
    DoubleU님의 조언을 듣고 아래와 같이 구분지었는데 시간나실때 이렇게 사용해도 되는지
    여쭙습니다.


    $(function() {
    var open = 0;
    var top = $('.infoArea').offset().top - parseFloat($('.infoArea').css('bottom').replace(/auto/, 0));
    $(window).scroll(function() {

    var scroll = $(window).scrollTop();
    if (scroll >= 1000) {
    $(".infoArea").addClass("openLayer");
    open = 1;
    } else {
    $(".infoArea").removeClass("openLayer");
    $(".openLayer").css('bottom',-513+'px');
    open = 0;
    }

    });

    $(".open").click(function(){
    var outerHeight=$(".openLayer").outerHeight();
    if(ativa == 0){
    $(".openLayer").stop().animate({"bottom":0});
    $(".open").html('옵션 닫기');
    open = 1;
    }else{
    $(".openLayer").stop().animate({"bottom":-513+'px'});
    $(".open").html('옵션 열기');
    open = 0;
    }
    });

    });
  • ? profile
    제 예상으로는 원하시는 동작이 될 것 같은데요.

    open이라는 변수의 역할은 무엇인가요?

    $(function() {
    $( document ).ready(function() {
    두가지는 동일한 동작을 합니다.
    도큐멘트가 준비가 되면 실행을 하라는 것이죠.
    html이 순차 실행이므로 스크립트가 먼저 실행되었는데 html상 필요한 코드가 아직 도착을 안했다면 오류가 생깁니다.
    그래서 저것으로 감싸면 html을 다 불러온 다음에 스크립트를 실행합니다.