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

<!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» я до сих пор не знаю, как это сделать ... Я был бы очень благодарен, если бы кто-то мог мне помочь ,

2
Rainer Lanemann 11 Янв 2017 в 18:13

3 ответа

Лучший ответ

Простым решением было бы создать функцию, которая сравнивает две высоты, а затем выводит строку, которую вы можете назначить элементу 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
    }
  });
});
1
4castle 11 Янв 2017 в 15:48

Вы можете использовать массив объектов следующим образом:

<!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>
0
data 11 Янв 2017 в 15:42

Вы можете сравнить каждый элемент с каждым элементом 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
Nina Scholz 11 Янв 2017 в 15:30