我正在尝试根据用户给出的值更新 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
有什么建议吗?
最佳答案
尝试更改 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>
关于javascript - 如何更新单个值而不影响数组中的其他值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38237504/