如何在 Javascript 中增加 marginLeft onclick？

Question

我想在 javascript style.marginLeft=0 開始我的 onclick() function style.marginLeft=0就像從'0px'到'-100%'到'-200%'開始，然后以'-200%'結尾，當它變成 '-200%'如果你再次點擊它，它會帶你回到.marginLeft='0' Jsfiddle 上的代碼

 var x = document.getElementsByClassName('box')[0]; var u = -100; function addMargin() { var current = x.style.marginLeft = u + '%'; if (x.style.marginLeft == -200) { x.style.marginLeft = '0'; } else {} }

 #container { display: inline-block; position: relative; width: 100%; height: 150px; white-space: nowrap; overflow: hidden; }.box { width: 100%; height: 150px; display: inline-block; position: relative; }.box:nth-child(1) { background: lightblue; }.box:nth-child(2) { background: red; }.box:nth-child(3) { background: green; }

 <div id='container'> <div class='box'>1</div> <div class='box'>2</div> <div class='box'>3</div> </div> <input type="button" value="Next>" onclick="addMargin()" />

Answer 1

您可以在每次迭代時降級 100 並使用模運算符（ % 400 ）進行重置

這是一個例子：

 var x = document.getElementsByClassName('box')[0]; var u = -100; function addMargin() { x.style.marginLeft = u + '%'; u -= 100 u %= 400 console.log("margin-left:", x.style.marginLeft) }

 #container { display: inline-block; position: relative; width: 100%; height: 150px; white-space: nowrap; overflow: hidden; }.box { width: 100%; height: 150px; display: inline-block; position: relative; }.box:nth-child(1) { background: lightblue; }.box:nth-child(2) { background: red; }.box:nth-child(3) { background: green; }.as-console-wrapper { max-height: 20px;important; }

 <div id='container'> <div class='box'>1</div> <div class='box'>2</div> <div class='box'>3</div> </div> <input type="button" value="Next>" onclick="addMargin()" />

Answer 2

條件匹配錯誤，您需要使用一些外部計數變量進行驗證，而不是匹配marginLeft

 var x = document.getElementsByClassName('box')[0]; var u = -100; var count = 1; function addMargin() { count = count%3; x.style.marginLeft = count * u + '%'; count++; }

 #container { display: inline-block; position: relative; width: 100%; height: 150px; white-space: nowrap; overflow: hidden; }.box { width: 100%; height: 150px; display: inline-block; position: relative; transition:all 0.8s ease; }.box:nth-child(1) { background: lightblue; }.box:nth-child(2) { background: red; }.box:nth-child(3) { background: green; }

 <div id='container'> <div class='box'>1</div> <div class='box'>2</div> <div class='box'>3</div> </div> <input type="button" value="Next>" onclick="addMargin()" />

Answer 3

這是我現在能想到的最干凈/最緊湊的實現。 正如其他人所說，關鍵是使用Remainder Operator 。

此外，請使用addEventListener / removeEventListener API，因為多年來它一直是處理事件的正確方法。

 const box0 = document.getElementsByClassName('box')[0]; box0._current = 0; function addMargin() { box0.style.marginLeft = `-${++box0._current % 4 * 100}%`; } document.getElementById('button').addEventListener('click', addMargin);

 #container { display: inline-block; position: relative; width: 100%; height: 150px; white-space: nowrap; overflow: hidden; }.box { width: 100%; height: 150px; display: inline-block; position: relative; }.box:nth-child(1) { background: lightblue; }.box:nth-child(2) { background: red; }.box:nth-child(3) { background: green; }

 <div id='container'> <div class='box'>0</div> <div class='box'>1</div> <div class='box'>2</div> </div> <input id='button' type="button" value="Next>" />