Блог

Главная - Вопросы по программированию - Как мне изменить цвет фона для элементов в массиве с одинаковым значением?

Как мне изменить цвет фона для элементов в массиве с одинаковым значением?

#javascript #arrays

#javascript #массивы

Вопрос:

Здесь я отображаю символы в таблице js

 function Init()
{
    debugger;
    //start page
    const text = potterCharacters.map(character => {
        const { name, actor, image } = character
        return `<tr>
            <td id="column" class="column">${name}</td>
            <td id="column" class="column">${actor}</td>
            <td id="column" class="column"><img src="${image}"/></td>
        </tr>`
    })
    document.getElementById("rows").innerHTML = text ;
}

Теперь я хочу, чтобы все символы с одинаковым «домом» имели одинаковый цвет фона с помощью функции

Массив, только один символ, чтобы вы понимали

 let potterCharacters = [
{
  name: "Harry Potter",
  species: "human",
  gender: "male",
  house: "Gryffindor",
  dateOfBirth: "31-07-1980",
  yearOfBirth: 1980,
  ancestry: "half-blood",
  eyeColour: "green",
  hairColour: "black",
  patronus: "stag",
  hogwartsStudent: true,
  hogwartsStaff: false,
  actor: "Daniel Radcliffe",
  alive: true,
  image: "http://hp-api.herokuapp.com/images/harry.jpg"
},

Ответ №1:

Самое простое решение — добавить цвет фона к вашим данным и использовать его в функции map.

 function Init()
{
    debugger;
    //start page
    const text = potterCharacters.map(character => {
        const { name, actor, image, houseBgColor } = character
        return `<tr class="row" style="background-color: ${houseBgColor}">
            <td class="column">${name}</td>
            <td class="column">${actor}</td>
            <td class="column"><img src="${image}"/></td>
        </tr>`
    })
    document.getElementById("rows").innerHTML = text ;
}

Если вы не хотите или не можете изменять свои данные, вы можете создать отдельный массив и получить цвет фона из массива цветов.

Пример:

 const colors = {house1: "orange", house2: "blue", house3: "gray"}

Затем вы можете использовать его внутри функции map следующим образом (где house — это ключ в объекте, который должен соответствовать вашим данным):

 <tr class="row" style="background-color: ${colors[house]}">

Комментарии:

1. Спасибо, это может сработать, но файл данных очень большой, и для добавления потребуется много времени, нет ли способа поместить его в функцию, которая, возможно, перебирает массив и получает все дома с именем «Гриффиндор»?

2. @OfficialRules тогда вы можете использовать мое второе предложение. Вам нужно сопоставить дома с цветами в этом объекте

3. О, я не видел, что часть попробует сейчас

4. Я рад помочь

Метки: