文章/答案/技术大牛

发布

社区首页 >问答首页 >根据数组中的JavaScript对象文本中的值生成HTML元素

问根据数组中的JavaScript对象文本中的值生成HTML元素
EN

Stack Overflow用户

提问于 2015-09-23 00:26:23

回答 1查看 997关注 0票数 0

我正在尝试根据我的html中下拉菜单的值，使用来自我的JavaScript数组的技能部分的值来生成内容。我不知道该怎么做才是最好的办法。我已经生成了标题、描述和图像，但我知道需要对技能部分进行不同的处理，才能将其列入有序列表。下面是我的HTML代码。

<html>
    <head>
        <title>WernickeKevin_Assignment1</title>
        <meta charset="utf-8">
    </head>
    <body>

        <select id="infoChange">
            <option value="0">Digital Design 1</option>
            <option value="1">Interactive Production 1</option>
            <option value="2">Motion Graphics 1</option>
            <option value="3">Web Programming 1</option>
        </select>

        <div>
            <h1></h1>   
            <p></p>
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            <img src="">
        </div>  

    </body>
    <script src="js/courses.js"></script>
</html>

这是我的JavaScript文件，其中包含有对象和其他代码的数组。注意:我试图在有序的html列表中生成技能部分中的值。

    var courses = [

    {
        name: 'Digital Design 1',
        code: '(WEBD 111)',
        description: 'This course introduces students to colour theory, typography, layout and visual hierarchy. These principles are presented as part of a universal set of techniques that are applied across design disciplines and reinforced through examples from numerous fields. Students are introduced to the language of design as well as the foundational design process.',
        skills: ['Photoshop', 'Illustrator', 'Wireframing'],
        image: 'images/image1.jpg'
    },

    {
        name: 'Interactive Production 1',
        code: '(WEBD 112)',
        description: 'Through a series of case studies, students will be given a high-level overview of all of the component pieces of an interactive project. Each stage of a project is analyzed with an emphasis on design as a problem-solving process. Topics include the role of interactive design, team roles, and project planning.',
        skills: ['JavaScript', 'Objects', 'Functions'],
        image: 'images/image2.png'
    },

    {
        name: 'Motion Graphics 1',
        code: '(WEBD 113)',
        description: 'Throughout this course, students are exposed to the discipline of motion graphics on the web. The focus of this course is the creation of animated and dynamic interactive media for web and multimedia applications. Students are taught a variety of techniques that enable the creation of effective motion graphics projects that support the message to be delivered by the completed project, and are appropriate for the medium. Students also learn how to animate objects, create symbols and assemble motion graphics projects for delivery to a variety of media, ranging from mobile devices to home entertainment systems.',
        skills: ['CSS Transitions', '-webkit-', 'keyframing'],
        image: 'images/image4.png'
    },

    {
        name: 'Web Programming 1',
        code: '(WEBD 120)',
        description: 'This course provides learners with a fundamental understanding of the concepts that underpin client-side web programming for both desktop and mobile platforms. Through a series of hands-on exercises, students will learn how to design, build and deploy standards-compliant web pages using appropriate technologies and tools.',
        skills: ['HTML', 'CSS', 'Semantics'],
        image: 'images/image4.png'
    }
];

    //Grab value of html options in the select tag, and use them as index values for the array

var e = document.getElementById("infoChange");
var index = e.options[e.selectedIndex].value;

document.getElementsByTagName('h1')[0].innerHTML = courses[index].name + ' ' + courses[index].code;
document.getElementsByTagName('p')[0].innerHTML = courses[index].description;
document.getElementsByTagName('img')[0].src = courses[index].image;

html

html-lists

javascript-objects

javascript

arrays

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-23 00:48:30

从设置页面和课程的方式来看，每个课程总是有三个技能，以及三个预设的<li>占位符。因此，您可以简单地将每个li元素分配给skills数组中的相应技能：

  document.getElementsByTagName('li')[0].innerHTML = courses[index].skills[0];
  document.getElementsByTagName('li')[1].innerHTML = courses[index].skills[1];
  document.getElementsByTagName('li')[2].innerHTML = courses[index].skills[2];

虽然我觉得重复代码很难看。包含0到2的for循环可以工作，但其他范围将不对应于HTML中的三个<li>。我想到的另一种选择是通过清除ol并为每个课程技能插入一个函数来更改列表结构，例如

function insertSkill(skillText) {
  var newSkill = document.createElement("li");
  var newSkillText = document.createTextNode(skillText);
  newSkill.appendChild(newSkillText);
  document.getElementsByTagName('ol')[0].appendChild(newSkill);
}

var courses = [

  {
    name: 'Digital Design 1',
    code: '(WEBD 111)',
    description: 'This course introduces students to colour theory, typography, layout and visual hierarchy. These principles are presented as part of a universal set of techniques that are applied across design disciplines and reinforced through examples from numerous fields. Students are introduced to the language of design as well as the foundational design process.',
    skills: ['Photoshop', 'Illustrator', 'Wireframing'],
    image: 'images/image1.jpg'
  },

  {
    name: 'Interactive Production 1',
    code: '(WEBD 112)',
    description: 'Through a series of case studies, students will be given a high-level overview of all of the component pieces of an interactive project. Each stage of a project is analyzed with an emphasis on design as a problem-solving process. Topics include the role of interactive design, team roles, and project planning.',
    skills: ['JavaScript', 'Objects', 'Functions'],
    image: 'images/image2.png'
  },

  {
    name: 'Motion Graphics 1',
    code: '(WEBD 113)',
    description: 'Throughout this course, students are exposed to the discipline of motion graphics on the web. The focus of this course is the creation of animated and dynamic interactive media for web and multimedia applications. Students are taught a variety of techniques that enable the creation of effective motion graphics projects that support the message to be delivered by the completed project, and are appropriate for the medium. Students also learn how to animate objects, create symbols and assemble motion graphics projects for delivery to a variety of media, ranging from mobile devices to home entertainment systems.',
    skills: ['CSS Transitions', '-webkit-', 'keyframing'],
    image: 'images/image4.png'
  },

  {
    name: 'Web Programming 1',
    code: '(WEBD 120)',
    description: 'This course provides learners with a fundamental understanding of the concepts that underpin client-side web programming for both desktop and mobile platforms. Through a series of hands-on exercises, students will learn how to design, build and deploy standards-compliant web pages using appropriate technologies and tools.',
    skills: ['HTML', 'CSS', 'Semantics'],
    image: 'images/image4.png'
  }
];

//Grab value of html options in the select tag, and use them as index values for the array

var e = document.getElementById("infoChange");
e.addEventListener("change", updateInfo);

function updateInfo() {
  var index = e.options[e.selectedIndex].value;

  document.getElementsByTagName('h1')[0].innerHTML = courses[index].name + ' ' + courses[index].code;
  document.getElementsByTagName('p')[0].innerHTML = courses[index].description;
  document.getElementsByTagName('img')[0].src = courses[index].image;
  document.getElementsByTagName('li')[0].innerHTML = courses[index].skills[0];
  document.getElementsByTagName('li')[1].innerHTML = courses[index].skills[1];
  document.getElementsByTagName('li')[2].innerHTML = courses[index].skills[2];
}

function clearSkills() {
  document.getElementsByTagName('ol')[0].innerHTML = "";
}

function insertSkill(skillText) {
  var newSkill = document.createElement("li");
  var newSkillText = document.createTextNode(skillText);
  newSkill.appendChild(newSkillText);
  document.getElementsByTagName('ol')[0].appendChild(newSkill);
}

updateInfo();

<html>

<head>
  <title>WernickeKevin_Assignment1</title>
  <meta charset="utf-8">
</head>

<body>

  <select id="infoChange">
    <option value="0">Digital Design 1</option>
    <option value="1">Interactive Production 1</option>
    <option value="2">Motion Graphics 1</option>
    <option value="3">Web Programming 1</option>
  </select>

  <input type="button" onclick="insertSkill('my new skill')" value="Append Skill">
  <input type="button" onclick="clearSkills()" value="Clear  all Skills">
  <div>
    <h1></h1> 
    <p></p>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <img src="">
  </div>

</body>
<script src="js/courses.js"></script>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32729147

复制

相似问题

问根据数组中的JavaScript对象文本中的值生成HTML元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据数组中的JavaScript对象文本中的值生成HTML元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据数组中的JavaScript对象文本中的值生成HTML元素
EN