2017-01-11 5 views
2

Я искал такие сообщения из stackoverflow, но я еще не очень хорошо знаком с JS, поэтому я до сих пор не знаю, как решить мою проблему. Дело в том, что у меня есть два массива (1-е включает «имена», а в другом - «высоты»). Я сделал цикл, чтобы показать некоторую информацию о них на веб-странице. Но теперь я хотел бы создать цикл, который сравнивает эти значения. Я знаю, что одно решение будет то, что я пишу, если еще, если, иначе наказание, но, кажется, не очень умный ... Банкоматы мой код выглядит следующим образом:Javascript loop для сравнения разных чисел

<!doctype html> 
<html> 
<head></head> 
<body> 
<p id="test2">...</p> 
<p id="test3">...</p> 
<p id="test4">...</p> 
<p id="test5">...</p> 
<script> 

// Arrays. 1st with names. 2nd with heigths in cm. 

var names = ["name1", "name2", "name3", "name4"]; 
var height = [150, 165, 160, 165, 170]; 

/* Loop to show some info on page. 
E.g name1 is 150cm 
name2 is 155cm */ 

var text = ""; 

for(var i = 0; i < (names.length); i++) { 
text += names[i] + " is " + height[i] + "cm tall <br>"; 
} 
document.getElementById("test2").innerHTML = text; 

// Comparison by heights 
var a = height[0]; 
var b = height[1]; 
var c = height[2]; 
var d = height[3]; 

if(a < b) { 
document.getElementById("test3").innerHTML = names[0] + " is shorter than " + names[1]; 
} 
else if (a > b){ 
document.getElementById("test3").innerHTML = names[0] + " is taller than " + names[1]; 
} 
else { 
    document.getElementById("test3").innerHTML = names[0] + " is equal to " + names[1] + " height"; 
} 

if(b < c) { 
document.getElementById("test4").innerHTML = names[1] + " is shorter than " + names[2]; 
} 
else if (b > c){ 
document.getElementById("test4").innerHTML = names[1] + " is taller than " + names[2]; 
} 
else { 
    document.getElementById("test4").innerHTML = names[1] + " is equal to " + names[2] + " height"; 
} 
</script> 
</body> 
</html> 

Я пробовал некоторые решения, которые пришли на мой взгляд, но из-за «не-того-большого-javascript-знания» я до сих пор не знаю, как это сделать ... Я был бы очень благодарен, если бы кто-то мог мне помочь.

ответ

1

простое решение было бы создать функцию, которая сравнивает две высоты, а затем выводит строку, вы можете присвоить элементу DOM. Вы также можете хранить информацию в объектах, так что вы не имеете несколько массивов:

function comparePeople(person1, person2) { 
 
    if (person1.height < person2.height) { 
 
    return person1.name + " is shorter than " + person2.name; 
 
    } else if (person1.height > person2.height){ 
 
    return person1.name + " is taller than " + person2.name; 
 
    } else { 
 
    return person1.name + " is equal to " + person2.name + " height"; 
 
    } 
 
} 
 

 
var people = [ 
 
    { name: 'name1', height: 150 }, 
 
    { name: 'name2', height: 165 }, 
 
    { name: 'name3', height: 160 }, 
 
    { name: 'name4', height: 165 } 
 
]; 
 

 
var text = ""; 
 
people.forEach(function(person) { 
 
    text += person.name + ' is ' + person.height + 'cm tall <br>'; 
 
}); 
 

 
document.getElementById("test1").innerHTML = text; 
 
document.getElementById("test2").innerHTML = comparePeople(people[0], people[1]); 
 
document.getElementById("test3").innerHTML = comparePeople(people[1], people[2]);
<p id="test1">...</p> 
 
<p id="test2">...</p> 
 
<p id="test3">...</p> 
 
<p id="test4">...</p>

Теперь все, что вам нужно сделать, это использовать цикл и вызвать comparePeople:

people.forEach(function(person1) { 
    people.forEach(function(person2) { 
    if (person1 !== person2) { 
     comparePeople(person1, person2); // do something with this value 
    } 
    }); 
}); 
+0

Я не знаю почему, но я полностью забыл объекты. Спасибо, все работает сейчас! О, а также спасибо за forEach, он выглядит солидно! :) –

0

Вы можете сравнить каждый элемент с каждым элементом height и напечатать его результат.

function append(string) { 
 
    var node = document.getElementById('result'); 
 
    node.appendChild(document.createTextNode(string)); 
 
    node.appendChild(document.createElement('br')); 
 
} 
 

 
var names = ["name1", "name2", "name3", "name4"]; 
 
var height = [150, 165, 160, 165, /* 170 no name */]; 
 
var text = "", 
 
    i, j; 
 

 
for (var i = 0; i < (names.length); i++) { 
 
    text += names[i] + " is " + height[i] + "cm tall <br>"; 
 
} 
 

 
document.getElementById("test2").innerHTML = text; 
 

 
for (i = 0; i < height.length - 1; i++) { 
 
    for (j = i + 1; j < height.length; j++) { 
 
     if (height[i] < height[j]) { 
 
      append(names[i] + " is shorter than " + names[j]); 
 
     } else if (height[i] > height[j]) { 
 
      append(names[i] + " is taller than " + names[j]); 
 
     } else { 
 
      append(names[i] + " is equal to " + names[j]); 
 
     } 
 
    } 
 
}
<p id="test2">...</p> 
 
<p id="result"></p>

0

вы можете использовать массив объектов, как это:

<!doctype html> 
<html> 
<head></head> 
<body> 
<p id="test1">...</p> 
<p id="test2">...</p> 
<p id="test3">...</p> 
<p id="test4">...</p> 
<p id="test5">...</p> 
<script> 

// Arrays. 1st with names. 2nd with heigths in cm. 

var names = ["name1", "name2", "name3", "name4"]; 
var height = [150, 165, 160, 165, 170]; 

var obj = [ 
    {id: 1, name: "name1", compareId: 2, height: 150, resultId: 3}, 
    {id: 2, name: "name2", compareId: 3, height: 165, resultId: 4}, 
    {id: 3, name: "name3", compareId: 4, height: 160, resultId: 5}, 
    {id: 4, name: "name4", compareId: 1, height: 165, resultId: 1} 
] 

var text = ""; 

for(var i = 0; i < (obj.length); i++) { 
    text += obj[i].name + " is " + obj[i].height + "cm tall <br>"; 
} 
document.getElementById("test2").innerHTML = text; 

for(var i = 0; i < (obj.length); i++) { 
     var item = getById(obj[i].compareId); 
     if(obj[i].height < item.height) 
      document.getElementById("test" + obj[i].resultId).innerHTML = obj[i].name + " is shorter than " + item.name; 
     else if(obj[i].height > item.height) 
      document.getElementById("test" + obj[i].resultId).innerHTML = obj[i].name + " is taller than " + item.name; 
     else 
      document.getElementById("test" + obj[i].resultId).innerHTML = obj[i].name + " is equal than " + item.name; 
} 

function getById (id) { 
    for(var i = 0; i < (obj.length); i++) { 
     if (obj[i].id === id) 
      return obj[i]; 
    } 
} 

</script> 
</body> 
</html>