javascript (jQuery) 변수가 여러개의 값을 리턴합니다. 계속 덮어씌워지는 것이 아닌 추가 됩니다.

Question

javascript (jQuery) 변수가 여러개의 값을 리턴합니다. 계속 덮어씌워지는 것이 아닌 추가 됩니다.

조회수 899회

javascript

jquery

variable

0

싫어요

var i;
function slide(i){
       //$previewImg 클릭시 변수  i 를 받아와 사용
        console.log(i);
};

$previewImg.on('click', function(){
        i = $previewImg.index(this);
        slide(i);
});

$previewImg 를 클릭할 때 마다 slide 함수에 변수i가 하나의 값이 아닌 클릭했을 때의 새로운i 값이 변수에 추가 됩니다. slide 함수 안에서 마지막 추가 된 변수로 덮어씌우는 방법이 궁금합니다. ㅠㅠ var i = i 와 같이 해결하면 될 줄 알았는데 되지 않네요.

console.log(i)로 확인해보면 첫 줄엔 전에 갖던 변수 i의 값 두번 쨰 줄에 새로운 값이 출력되는데, 새로운 값만 출력되게 하고 싶어요 !!

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 0 · Accepted Answer

올려 주신 전체 소스를 봤는데요... i가 바뀔 수가 없는 상황인데요.

function slide(i){
  /* 어쩌구 저쩌구... */
  if (!$previewImg.hasClass('active')) {
    $previewImg.children('img').mouseover(function(){
      $(this).addClass('active');
      console.log(i);
    });
    /* 이러쿵 저러쿵... */
  };
};

이 함수만 놓고 보면 i는 이 함수를 콜할 때 전달하는 값을 그대로 사용하는 것이니 예컨대 slide("666")을 콜하면 콘솔에 666이 찍힐겁니다. 문제는 뭐냐면 slide()가 전체 소스에서 단 한 번 호출되고 이때 i에 값이 단 1번만 할당이 되고 있다는 겁니다.

이런 상황이거든요.

페이지가 로딩된다.
사용자가 검은 box 중 j번째 것을 누른다.
slide(j-1)이 콜된다. (1번째 검은박스의 인덱스는 0이니까)
slide(j-1) 함수 안에서 i = j-1로 고정된 상황이다.
이제 어느 $previewImg에 onMouseOver 이벤트를 터뜨려도 콘솔에는 j-1이 찍힌다. (slide(j-1)에 의한 실행이므로)

필요하신 것이 이 문제 자체의 원인뿐이라면 이게 아마 답이 되었을 것입니다.

그러면 slide(보여줄슬라이드인덱스) 함수만 잘 고치면 다 해결되느냐? 그렇지 않을 것 같습니다. 애초에 "몇 번째 슬라이드를 보여주느냐"만 임의로 할당해서 넘기는 방식은 이상합니다. 왜냐하면 슬라이딩이라는 건 '지금 보이는' 슬라이드, '보여줄' 슬라이드, '보여졌던' 슬라이드 총 3개 슬라이드가 관여하는 일이거든요. (잘 생각해 보세요.)
그런 의미에서 그냥 전반적으로 재구축해 보심이 어떨까 합니다. 옛날에 제가 짰던 jquery 슬라이더의 경우엔 몇 번 슬라이더가 지금 떠 있냐를 변수로 저장하지 않고 슬라이드에 클래스 동적 할당으로 처리했는데 (고칠 곳이 한두군데가 아니지만) 이것도 대충 잘 굴러가거든요. 그리고 혹시 지금 이 작업이 공부목적이 아니시라면... 정말 잘나온 플러그인들이 많으니까 찾아서 쓰시고요.