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

时间：2016-07-07 04:21:56

标签： javascript jquery arrays

我正在尝试根据用户提供的值更新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应始终代表DOM中的-。

我现在得到的是：

enter image description here

我不希望如此，我只是不希望看到-1，我只需要-（减去）符号。

我遇到的另一个问题是，一旦你输入一个负数，那么在DOM中看到的新值/数字会带有负号，即使给出的值为正数： enter image description here

Here is the code if you want to take a look

有什么建议吗？

2 个答案:

答案 0 :(得分：1)

当oldArray.includes(-1)在数组中的任何位置时，条件-1将始终为真。这就是为什么它们都成为-，看起来你只想检查当前的索引。

要移除-1，您可以将newArray += " - " + oldArray[i]更改为newArray += " - "。通过这些更改，代码看起来就像这样：

function iterateOverArray(array){

   var oldArray = array;
   var newArray = "";

  for (var i = 0; i < oldArray.length; i++) {
      if (oldArray[i] == -1) {
          newArray += " - ";
      } else {
          newArray += " + " + oldArray[i];
      }
}
   newArray = newArray.replace(/\-  \+/, "-"); // See information below
   return newArray;
}

哪个接近你想要的。例如，输入[10, 2, -1, 10]将返回+ 10 + 2 - + 10。最后，为了摆脱"- +"，您可以使用.replace()。所以在返回之前添加newArray = newArray.replace(/\- \+/, "-");。这将仅使用"- +"替换子字符串"-"的所有实例。

＆＃13;
＆＃13; 
function iterateOverArray(array){

   var oldArray = array;
   var newArray = "";

  for (var i = 0; i < oldArray.length; i++) {
      if (oldArray[i] == -1) {
          newArray += " - ";
      } else {
          newArray += " + " + oldArray[i];
      }
}
   newArray = newArray.replace(/\-  \+/, "-");
   return newArray;
}

console.log(iterateOverArray([10, 2, -1, 10]))
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果前一项是-，请尝试更改if语句检查。如果是，则追加-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>
user_images = user.images
user_images.insert(0, user_images.delete(user.images.find_by_id(user.primary_image_id))

相关问题
最新问题