Сделать литеральный объект иметь параметры? - PullRequest
Новая
       1

Сделать литеральный объект иметь параметры?

0 голосов
/ 18 октября 2018

В настоящее время я использую Javascript для отображения животных и их информации на странице HMTL.

В настоящее время отображается изображение кролика и информация, подобная этой:

BUNNY IMAGE
Возрастной диапазон: 3 месяца - 2 года
Макс. Принять: 1-2
Связанные пары: Да
Необходимые дома: 5

Мне нужно сделать параметр Возрастной диапазон, Максимальное принятие и т. Д. Параметром вместо того, чтобы просто сделать текст жирным шрифтом и написать его.вот мой JS: 

var bunny = {
  animalName: 'Bunny',
  bondedPairs: '<b>Bonded Pairs: </b> Yes',
  maxAdopt: "<b>Max adopt: </b> 1-2",
  ageRange: "<b>Age Range: </b> 3 months - 2 Years",
  needingHomes: '<b>Needing homes: </b> 5',
  avatarSrc: '../images/bunny.jpg',
  note: 'note: We have lots of adorable fluffy loafs looking for their forever homes.',

  createProfile: function() {
    //creates a div to store their staff info
    var profile = document.createElement("div");
    //sets the class
    profile.className = "animalProfile";
    //creates a new image for the profile pic
    var avatar = document.createElement("img");
    //sets the source and name based on our object info
    avatar.src = this.avatarSrc;
    avatar.alt = this.animalName;
    //appends the image to the profile div
    profile.appendChild(avatar);
    //sets up the text
    var profileTxt = document.createElement("p");
    profileTxt.innerHTML = "<b>" + this.animalName + "</b><br />" +
      "</b><br />" + this.ageRange + "</b><br />" + this.maxAdopt +
      "  </b><br / > " + this.bondedPairs +
      "</b><br />" + this.needingHomes;

    //adds the text to the profile div
    profile.appendChild(profileTxt);
    //returns the completed profile
    return profile;
  }
}

document.getElementById("animal_list").appendChild(bunny.createProfile());


var bunny = {
  animalName: 'Bunny',
  bondedPairs: '<b>Bonded Pairs: </b> Yes',
  maxAdopt: "<b>Max adopt: </b> 1-2",
  ageRange: "<b>Age Range: </b> 3 months - 2 Years",
  needingHomes: '<b>Needing homes: </b> 5',
  avatarSrc: '../images/bunny.jpg',
  note: 'note: We have lots of adorable fluffy loafs looking for their forever homes.',

  createProfile: function() {
    //creates a div to store their staff info
    var profile = document.createElement("div");
    //sets the class
    profile.className = "animalProfile";
    //creates a new image for the profile pic
    var avatar = document.createElement("img");
    //sets the source and name based on our object info
    avatar.src = this.avatarSrc;
    avatar.alt = this.animalName;
    //appends the image to the profile div
    profile.appendChild(avatar);
    //sets up the text
    var profileTxt = document.createElement("p");
    profileTxt.innerHTML = "<b>" + this.animalName + "</b><br />" +
      "</b><br />" + this.ageRange + "</b><br />" + this.maxAdopt +
      "  </b><br / > " + this.bondedPairs +
      "</b><br />" + this.needingHomes;

    //adds the text to the profile div
    profile.appendChild(profileTxt);
    //returns the completed profile
    return profile;
  }
}

document.getElementById("animal_list").appendChild(bunny.createProfile());
body {
  background-color: lightblue;
}

#container {
  margin: 0 auto;
  width: 80%;
}

header {
  width: 100%;
  text-align: center;
}

section {
  width: 100%;
  text-align: center;
}

h1 {
  color: navy;
  font-family: 'Sofia', cursive;
  font-size: 2.5em;
  padding-top: 20px;
}

p {
  font-family: 'Quicksand', sans-serif;
  font-size: 16pt;
  text-align: center;
}

.animalProfile {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);
  width: 320px;
  height: 600px;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  vertical-align: top;
}

.animalProfile img {
  max-width: 300px;
  border-radius: 5px;
  border: 2px solid #4d4d4d;
}

.animalProfile p {
  font-size: 12pt;
  text-align: left;
  margin: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Animal Adoption</title>
  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../css/adopt_styles.css" />
</head>

<body>
  <div id="container">
    <header>
      <h1 id="heading" class="blueTxt">Our Animals to Adopt</h1>
    </header>
    <p>All our animals are available to adopt to proven loving and caring homes with responsible owners.</p>
    <section>
      <div id="animal_list">

      </div>

    </section>
  </div>
  <script src="../js/animal_script.js"></script>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Похоже, вам нужно показать список из одного или более кроликов.Поэтому я бы предложил создать массив объектов и создать эти объекты с помощью конструктора (для этого можно использовать синтаксис ES6 class).

Кроме того, предпочтительно разделять код, который обращается к HTMLдокумент из любого другого кода.

И почему бы не использовать буквальный синтаксис шаблона (с помощью обратных кавычек) для создания HTML-кода для представления одного зайчика.Это может быть метод класса Bunny.

Вот как это будет выглядеть: 

class Bunny {
    constructor(animalName) {
        this.animalName = animalName;
    }
    asHtml() {
        return `
        <div class="animalProfile">
            <img src="${this.avatarSrc}" alt="${this.animalName}">
            <p>
                <b>${this.animalName}</b><br><br>
                <b>Age Range: </b>${this.ageRange}<br>
                <b>Bonded Pairs: </b>${this.bondedPairs}<br>
                <b>Needing homes: </b>${this.needingHomes}<br>
                <b>Max adopt: </b>${this.maxAdopt}<br>
            </p>
        </div>`;
    }
}

// Create all the bunnies
const bunnies = [];
let bunny;

bunny = new Bunny("Rabbit");
bunny.bondedPairs = "Yes";
bunny.maxAdopt = "1-2";
bunny.ageRange = "3 months - 2 Years";
bunny.needingHomes = "5";
bunny.avatarSrc = "../images/rabbit.jpg",
bunnies.push(bunny);

bunny = new Bunny("Squirrel");
bunny.bondedPairs = "No";
bunny.maxAdopt = "1-3";
bunny.ageRange = "3 months - 3 Years";
bunny.needingHomes = "4";
bunny.avatarSrc = "../images/squirrel.jpg",
bunnies.push(bunny);

// Show them on the page
const list = document.getElementById("animal_list");
for (let bunny of bunnies) list.insertAdjacentHTML("beforeend", bunny.asHtml());
body { background-color:lightblue; }   
#container { margin: 0 auto; width:80%; }
header { width:100%; text-align:center; }
section { width:100%; text-align:center; }
h1 { color:navy; font-family:'Sofia', cursive; font-size:2.5em; padding-top:20px; }
p { font-family:'Quicksand', sans-serif; font-size: 16pt; text-align: center; }
.animalProfile { display: inline-block; background-color:rgba(255,255,255,0.5); }
<div id="container">
    <header>
        <h1 id="heading" class="blueTxt">Our Animals to Adopt</h1>
    </header>
    <p>All our animals are available to adopt to proven loving and caring 
  homes with responsible owners.</p>
    <section>
        <div id="animal_list">

        </div>
    </section>  
</div>
0 голосов
/ 18 октября 2018

Это то, что вы ищете?Не столько параметр, который используется, но вместо этого ключи объекта.Поскольку я не уверен, откуда вы хотели бы получить ваши параметры.Теперь просто зацикливаем все ключи объекта, кроме avatarSrc и createProfile.Это имеет то преимущество, что вы можете добавить больше свойств другим животным, которые будут автоматически отображаться.

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

var bunny = {
  "Animal Name": 'Bunny',
  "Bonded Pairs": 'Yes',
  "Max Adopt": "1-2",
  "Age Range": "3 months - 2 Years",
  "Needing Homes": '5',
  avatarSrc: '../images/bunny.jpg',
  Note: 'We have lots of adorable fluffy loafs looking for their forever homes.',

  createProfile: function() {
    //creates a div to store their staff info
    var profile = document.createElement("div");
    //sets the class
    profile.className = "animalProfile";
    //creates a new image for the profile pic
    var avatar = document.createElement("img");
    //sets the source and name based on our object info
    avatar.src = this.avatarSrc;
    avatar.alt = this['Animal Name'];
    //appends the image to the profile div
    profile.appendChild(avatar);
    //sets up the text
    var profileTxt = document.createElement("p");

    const keys = Object.keys(this);

    keys.forEach((key) => {
      if(this.hasOwnProperty(key) && key !== 'avatarSrc' && key !== 'createProfile') {
     	profileTxt.innerHTML += '<b>'+ key + ':</b> ' + this[key] + '<br/>';   
      }
    });
    
    //adds the text to the profile div
    profile.appendChild(profileTxt);
    //returns the completed profile
    return profile;
  }
}

document.getElementById("animal_list").appendChild(bunny.createProfile());
<div id="animal_list"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...