使文字对象具有参数？

时间：2018-10-18 05:50:10

标签： javascript html object parameters

目前，我正在使用Javascript在HMTL页面上显示动物及其信息。

当前它显示的是兔子的图像和类似这样的信息：

  

兔子图像
  年龄范围： 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 :(得分：2)

您似乎需要能够显示一个或更多兔子的列表。因此，我建议您创建一个对象数组，并使用构造函数创建这些对象（可以使用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>

答案 1 :(得分：0)

这是您要找的东西吗？使用的不是参数，而是对象键。因为我不确定您希望从哪里获取参数。现在只循环除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"/>

相关问题
最新问题