增加和减少Pure Javascript中的值

Question

我正在尝试使用纯Javascript和CSS 开发一个非常简单的轮播。我在使用“next”和“previous”按钮时遇到问题，因为他们应该相互通信，设置轮播的当前位置。

这是我当前的代码（或JsFiddle：https://jsfiddle.net/kbumjLw2/1/）：

// Slider

var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;

// Previous button
document.getElementById("btn-prev").onclick = function() {
  // Making sure this functions will not run if it's the 0px of the slider
  if (parseInt(listRecommendations.style.left) != 0) {
    var currentPosition = parseInt(listRecommendations.style.left) + 100;
    listRecommendations.style.left = currentPosition + 'px';
    console.log(currentPosition);
  };
}

// Next button
var num = 100;
var maxValue = 1000 + 120;
console.log(maxValue);

document.getElementById("btn-next").onclick = function() {
  if (num < maxValue) {
    num += 100;
    listRecommendations.style.left = '-' + num + 'px';
    console.log(num);
  };
}

#list-recomendations{
  position: absolute;
}

.wrap-items .item{
  float: left;
}

<div class="recommendation">
  <div id="slider">
    <div id="list-recommendations" class="wrap-items">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
    </div>
  </div>

  <!-- Slider controls -->			
  <button id="btn-prev" class="btn-slider prev">Previous</button>
  <button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>

正如您在控制台上看到的那样，下一个按钮在每次点击时增加“100”，每次点击时上一个按钮减少“100”。上一个按钮似乎工作正常，但是下一个按钮没有获得更新的值，它总是使用它使用的最新值增加。

预期结果：

点击下一个按钮：100＆gt; 200> 300 ...

点击上一个按钮：200＆gt; 100＆gt; 0 ...

点击下一个按钮：100＆gt; 200> 300 ...

当前结果：

点击下一个按钮：100＆gt; 200> 300 ...

点击上一个按钮：200＆gt; 100＆gt; 0 ...

点击下一个按钮：400＆gt; 500> 600 ...

有关可能导致此问题的任何想法吗？

Answer 1

检查此更新的fiddle

// Previous button
    document.getElementById("btn-prev").onclick = function() {
        // Making sure this functions will not run if it's the 0px of the slider
            var currentPosition = parseInt(listRecommendations.style.left) - 100;
            listRecommendations.style.left = currentPosition + 'px';
            console.log(currentPosition);
    }

    // Next button
    var num = 100;
    var maxValue = 1000 + 120;
    console.log(maxValue);

    document.getElementById("btn-next").onclick = function() {
        if (num < maxValue) {
            var currentPosition = parseInt(listRecommendations.style.left) + 100;
            num = currentPosition;
            listRecommendations.style.left =  num + 'px';
            console.log(num);
        };
    }

您基本上每次都需要获取left值并在其上加上（+ next）减去（- prev）。

Answer 2

没有使用num，因为你可以使用元素的当前位置。

另请注意，-会将-符号连接到值，不会减去该值。

Ty this：

var maxValue = 1000 + 120;
var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;
document.getElementById("btn-prev").onclick = function() {
  var val = parseInt(listRecommendations.style.left);
  if (val != 0) {
    val -= 100;
    listRecommendations.style.left = val + 'px';
    console.log(val);
  };
}
document.getElementById("btn-next").onclick = function() {
  var val = parseInt(listRecommendations.style.left);
  if (val < maxValue) {
    val += 100;
    listRecommendations.style.left = val + 'px';
    console.log(val);
  };
}

#list-recomendations {
  position: absolute;
}
.wrap-items .item {
  float: left;
}

<div class="recommendation">
  <div id="slider">
    <div id="list-recommendations" class="wrap-items">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
    </div>
  </div>

  <!-- Slider controls -->
  <button id="btn-prev" class="btn-slider prev">Previous</button>
  <button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>

.text_content()