javascript - 如何更新单个值而不影响数组中的其他值？

Question

我正在尝试根据用户给出的值更新 DOM。

我有这个功能:

function iterateOverArray(array){

   var oldArray = array;
   var newArray = "";

  for (var i = 0; i < oldArray.length; i++) {
      if (oldArray.includes(-1)) {
          newArray += " - " + oldArray[i];
      } else {
          newArray += " + " + oldArray[i];
      }

}

   return newArray;
}

程序应该像这样工作:

如果给定的数组是:[1, 5, 10] 那么你应该在 DOM 中看到:1 + 5 + 10 但如果给定的数组是: [10, 2, -1, 10] 那么你在 DOM 中应该看到的是: 10 + 2 - 10 负数 -1 code> 应该始终代表 DOM 中的 -。

我现在得到的是:

我不想这样，我只是不想看到 -1，我只需要 -(减号)符号。

我遇到的另一个问题是，一旦输入负数，即使给定的值是正数，在 DOM 中看到的新值/数字也会带有负号:

Here is the code if you want to take a look

有什么建议吗？

Answer 1

尝试更改 if 语句，检查前一项是否为 -1。如果是，则附加 -。否则，如果这是第一项或前一项为 -1，则追加当前项。否则，附加 + 加当前项目:

if (oldArray[i] == -1) {
  newArray += " - ";
} else if (i == 0 || oldArray[i - 1] == -1) {
  newArray += oldArray[i];
} else {
  newArray += " + " + oldArray[i];
}

var arrayOfNumbers = [];
var column = 1;

function logingValues() {

  var values = $('input[name^=valuesToSum]').map(function(idx, elem) {
    newVal = $(elem).val();
    if (isNaN(newVal)) {
      newVal = 0;
    }
    return parseInt(newVal);
  }).get();

  //console.log("Values aquired from inputs " + values);

  arrayOfNumbers = values;

  //console.log("Values inserted on Array " + arrayOfNumbers);
}


function removeElement(id) {
  $('#' + id).remove();
  //console.log("element #" + id + " was eliminated");
}

function iterateOverArray(array) {

  var oldArray = array;
  var newArray = "";

  for (var i = 0; i < oldArray.length; i++) {
    if (oldArray[i] == -1) {
      newArray += " - ";
    } else if (i == 0 || oldArray[i - 1] == -1) {
      newArray += oldArray[i];
    } else {
      newArray += " + " + oldArray[i];
    }

    //console.log('__newArray', newArray);
    //console.log('__oldArray', oldArray);
  }

  return newArray;
}

function addElement(whereToPrint) {

  logingValues();

  var newArray = iterateOverArray(arrayOfNumbers);

  var printId = "print" + whereToPrint;

  //console.log(printId);

  //console.log("we can see the array like this " + arrayOfNumbers);

  $('#' + printId).html(newArray);

  //console.log('Element was created');


  column += 1;

  var newInput = '<div class="row" id="' + column + '">';
  newInput = newInput + '<div class="col-lg-3 col-md-4 col-sm-2">';
  newInput = newInput + '<input name="valuesToSum" type="text" placeholder="Place a Number" required />';
  newInput = newInput + '</div>';
  newInput = newInput + '<div class="col-lg-3 col-md-4 col-sm-2">';
  newInput = newInput + '<span id="print' + column + '"></span>';
  newInput = newInput + '</div>';
  newInput = newInput + '<div class="col-lg-4 col-md-2 col-sm-4">';
  newInput = newInput + '<button class="btn-danger rem" onclick="removeElement(' + column + ')">-</button>';
  newInput = newInput + '<button class="btn-default sum new" onclick="addElement(' + column + ')">+</button>';
  newInput = newInput + '</div>';
  newInput = newInput + '<div class="col-lg-2 col-md-2 col-sm-4 animation">';
  newInput = newInput + '<div class="spinner">';
  newInput = newInput + '</div>';
  newInput = newInput + '</div>';
  newInput = newInput + '</div>';

  $('.elemPlaceHold').append(newInput);

}

function loadingBar() {

  var summingBar = '<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div>';

  $('.spinner').append(summingBar);
}

function caculationEffect(countTotal) {
  $('#result').html("");
  loadingBar();

  setTimeout(function() {

    $('.spinner').html("");
    $('#result').html(countTotal);
  }, 2000);
}

function calculate() {
  //console.log("is calculating....");
  logingValues();
  var total = 0;
  var shouldSubtract = false;

  for (var i = 0; i < arrayOfNumbers.length; i++) {
    if (arrayOfNumbers[i] === "") continue;
    var currentNumber = parseInt(arrayOfNumbers[i], 10);

    if (isNaN(currentNumber)) {
      currentNumber = 0;
    }

    if (currentNumber === -1) {
      shouldSubtract = true;
    } else {
      if (shouldSubtract) {
        total -= currentNumber;
        shouldSubtract = false;
      } else {
        total += currentNumber;
      }
    }
  }
  caculationEffect(total);
  //console.log('countTotal', total);
}

.spinner {
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.rem,
.sum {
  border-radius: 100%;
}
.new {
  margin-left: 5px;
}

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <h1>Array Calculator</h1>
    <div class="jumbotron">
      <p>Please create your array by filling spaces with Numbers, its calculation will be based on provided logic.</p>
      <form class="container elemPlaceHold">

        <div class="row" id="1">
          <div class="col-lg-3 col-md-4 col-sm-2">
            <input name="valuesToSum" type="text" placeholder="Place a Number" required />
          </div>
          <div class="col-lg-3 col-md-4 col-sm-2">
            <span id="print1"></span>
          </div>
          <div class="col-lg-4 col-md-2 col-sm-4">
            <button class="btn-default sum" onclick="addElement(1)">+</button>
          </div>
          <div class="col-lg-2 col-md-2 col-sm-4 animation">
            <div class="spinner"></div>
          </div>
        </div>

      </form>
      <br>
      <div>
        <p>The total calculation of the array is <span id="result"></span>
        </p>
      </div>
      <br>
      <button class="btn btn-danger" onclick="calculate()">Animate</button>
    </div>
  </div>
  <footer>

    <script type="text/javascript" src="js/app.js"></script>
  </footer>
</body>

</html>