첫 번째 클릭에서만 작동하는 요소의 여백을 변경하는 JavaScript 함수

Question

돌릴 수있는 그림의 인라인 목록이 있습니다. 한 번에 5 개씩 만 표시하고 가운데 하나를 클릭하면 다른 하나가 가운데로 이동하고 나머지는 화면에서 움직입니다.

하나의 버튼이 다른 버튼과 관련되어있는 곳을 찾고 컨테이너가 어떤 방향으로 움직여야 하는지를 결정하기 위해 .offsetLeft을 사용하는 함수를 작성했습니다. 단추의 오프셋을 변경하여 컨테이너 내에서 이동할 수 있기를 바랬지 만 안타깝게도 JavaScript만으로는이 작업을 수행 할 수 없습니다.

그래서 저는 창을 가지고 오프셋 차이가있는 컨테이너의 여백을 변경하는 것이 가장 좋을 것이라고 판단했습니다.이 방법이 효과적입니다. 그 후 처음으로 그림을 클릭 할 때마다 이동하고 코드를 통과하는 것처럼 작동하지만 컨테이너의 여백은 변경되지 않습니다.

var cur_position; 
    function set_variables() 
    { 
     cur_position = document.getElementById("button3"); 
    } 

    function carousel(Event) 
    { 
     console.log(cur_position); 
     var clicked_element = Event.target; 
     var tray_bar = document.getElementById("button_tray"); 
     var num = 0; 

     console.log(clicked_element.offsetLeft); 
     clicked_element.offsetLeft = cur_position.offsetLeft - clicked_element.offsetLeft; 
     console.log(clicked_element.offsetLeft); 

     console.log(cur_position.offsetLeft); 
     console.log(clicked_element.offsetLeft); 

     if (clicked_element.offsetLeft < cur_position.offsetLeft) 
     { 
      num = cur_position.offsetLeft - clicked_element.offsetLeft; 
      console.log(cur_position.offsetLeft - num); 
      document.getElementById("button_tray").style.marginLeft += num; 

      cur_position = clicked_element; 
      console.log(cur_position); 
     } 
     else 
     { 
      num = clicked_element.offsetLeft - cur_position.offsetLeft; 
       console.log(num); 
       tray_bar.style.marginLeft = tray_bar.style.marginLeft - num; 

      cur_position = clicked_element; 
      console.log(cur_position); 
     } 
    } 

몸의 코드 : 여기

는 기능입니다

 <div class="button-wrapper"> 
      <ul id="button_tray" class="buttons"> 
       <li id="button1" class="message-button" onclick="carousel(event)"><div></div></li> 
       <li id="button2" class="link-button" onclick="carousel(event)"><div></div> </li> 
       <li id="button3" class="live-button" onclick="carousel(event)"><div></div> </li> 
       <li id="button4" class="social-button" onclick="carousel(event)"><div></div></li> 
       <li id="button5" class="ppt-button" onclick="carousel(event)"><div></div> </li> 
       <li id="button6" class="test-1" onclick="carousel(event)"><div></div></li> 
       <li id="button7" class="test-2" onclick="carousel(event)"><div></div></li> 
       <li id="button8" class="test-3" onclick="carousel(event)"><div></div></li> 
      </ul> 
     </div> 
    </div> 

정말 그 첫 번째 시간을 일하거나 더 나은 수있을 왜 알아낼 싶습니다 서로 관련하여 사진을 내부로 이동하십시오. JQuery 대신 JavaScript로 응답을 유지하십시오.

Answer 1

유일한 문제인지는 모르겠지만 여백을 설정할 때 단위 또는 스타일의 데이터 유형을 고려하지 않습니다. 이 라인 :

는

document.getElementById("button_tray").style.marginLeft += num; 

marginLeft의 첫 번째 액세스 빈 문자열이 될 수 있으므로 += num이 제대로 작동합니다. num이 20으로 설정된 경우 브라우저는 스타일 속성을 20px으로 변환 할 수 있습니다. 다음 번에 marginLeft에 액세스하면 "20px"이 다시 나타납니다. 그 결과에 20을 더하면 "20px20"이되는데, 이는 분명히 좋은 가치는 아닙니다.

난 당신이 추가하거나 여백 속성에서 제거 할 때, 당신이 대신처럼해야한다고 건의 할 것입니다 :

var tray_bar = document.getElementById("button_tray"); 
var pixelMargin = parseInt(tray_bar.style.marginLeft, 10); 
pixelMargin += num; 
tray_bar.style.marginLeft = pixelMargin.toString() + 'px';