Question

＆＃13;

name = "Joel Carter";
title = "Software Developer"
mobile = "708-5xx-xx90"
email = "carter3689@gmail.com"

var formattedName = HTMLheaderName.replace("%data%", name);
var formattedTitle = HTMLheaderRole.replace("%data%", title);
var formatedMobile = HTMLmobile.replace("%data%",mobile);
var formattedEmail = HTMLemail.replace("%data%", email);
var formatted

$("#header").append(formattedName);
$("#header").append(formattedTitle);
$("#topContacts").prepend(formatedMobile);
$("#topContacts").prepend(formattedEmail);

＆＃13;

body,
div,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding:0;
  margin:0;
  font-family: "Roboto", sans-serif;
}

.clear-fix {
  overflow: auto;
}

.education-entry,
.work-entry,
.project-entry {
  padding: 0 5%;
}

h1 {
  font-size: 40px;
  color: #f5a623;
  line-height: 48px;
  display: inline;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  color: #999;
  line-height: 29px;
  padding: 10px;
}

h3 {
  font-style: italic;
  font-size: 20px;
  color: #000;
  line-height: 22px;
}

h4 {
  font-weight: bold;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 17px;
}

h2,
h3,
h4,
h5 {
  padding:10px 5%;

}


.date-text {
  font-style: italic;
  font-size: 14px;
  color: #999;
  line-height: 16px;
  float: left;
}

.location-text {
  font-style: italic;
  font-size: 14px;
  color: #999;
  line-height: 16px;
  float: right;

}

p {
  font-size: 14px;
  color: #333;
  line-height: 21px;
}

a {
  color: #1199c3;
  text-decoration: none;
  margin-top: 10px;
  display: block;
}

.welcome-message {
  font-style: italic;
  font-size: 18px;
  color: #f3f3f3;
  line-height: 28px;
}

#skills-h3 {
  color: #f5ae23;
  display: none;
}

.orange {
  background-color: #f5ae23;
}

.orange-text {
  color: #f5ae23;
}

.white-text {
  font-weight: bold;
  color: #fff;
}

.gray {
  background-color: #f3f3f3;
  padding-bottom: 10px;
  clear:both;
}

.dark-gray {
  background-color: #4a4a4a;
}

/* TODO: Replace with image later */
#header {
  background-color: #484848;
}

.flex-box {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}

.center-content {
  padding: 2.5% 5%;
}

ul {
  list-style-type: none;
}

.biopic {
  float: left;
  padding: 10px;
  width: 200px;
  display: none;
}

img {
  padding: 10px;
}

span {
  padding: 5px;
}

#lets-connect {
  text-align: center;
}

/* Media queries to handle various device widths */

@media only screen and (max-width: 1024px) {
  #lets-connect {
    margin-top: 5%;
  }
}

@media only screen and (max-width:900px) {
  .biopic {
    width: 175px;
  }
}

@media only screen and (max-width: 750px) {
  #lets-connect {
    margin-top: 10%;
  }
  .biopic {
    width: 150px;
  }
  .welcome-message {
    display: none;
  }
}

#map {
  display: block;
  height: 100%;
  margin: 0 5%;
}

#mapDiv {
  height: 400px;
  width: 100%;
  padding-bottom: 5%;
}

@media only screen and (min-width: 750px) {
  #skills-h3,
  .biopic {
    display: block;
  }
}

＆＃13;

<!DOCTYPE html>

<!--
This is an HTML document. It contains information about how elements in the website
are arranged. In other words, it describes the layout of a website.

I can't wait to see the resumes you put together!

Cameron Pittman, Udacity Course Developer
-->

<!--
The <head> of a website generally links to important resources the page will
need to load. You'll see a lot of <link>s to CSS files for styles and
<scripts> for JavaScript files to build interactions.
-->
<head>
  <!-- This tells the browser how to read the document. -->
  <meta charset="utf-8">

  <!-- Tells the browser what the title of this page should be. -->
  <title>Resume</title>

  <!-- Load the page styles. -->
  <link href="css/style.css" rel="stylesheet">

  <!--
  jQuery is a common JavaScript library for reading and making changes to the
  Document Object Model (DOM). The DOM is a tree that contains information
  about what is actually visible on a website.

  While HTML is a static document, the browser converts HTML to the
  DOM and the DOM can change. In fact, JavaScript's power comes from
  its ability to manipulate the DOM, which is essentially a JavaScript
  object. When JavaScript makes something interesting happen on a
  website, it's likely the action happened because JavaScript changed
  the DOM. jQuery is fast and easy to use, but it doesn't do anything
  you can't accomplish with vanilla (regular) JavaScript.
  -->
  <script src="js/jQuery.js"></script>

  <!-- More on helper.js in the class -->
  <script src="js/helper.js"></script>

  <!--
  Uncomment the <script> tag below when you're ready to add an interactive
  Google Map to your resume!
  -->
<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> -->

  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="main">
      <!-- You'll be deleting this line in the course -->

    <!--
    Everything from here to the <script> tag below is the skeleton of your
    website. Your code will add information to each of the sections of the
    resume below. You can pretty easily figure out what each section will
    display by looking at the id or at what's written between the <h2> tags.
    -->
    <div id="header" class="center-content clear-fix">
      <ul id="topContacts" class="flex-box"></ul>
    </div>
    <div style="clear: both;"></div>
    <div id="workExperience" class="gray">
      <h2>Work Experience</h2>
    </div>
    <div id="projects">
      <h2>Projects</h2>
    </div>
    <div id="education" class="gray">
      <h2>Education</h2>
    </div>
    <div id="mapDiv">
      <h2>Where I've Lived and Worked</h2>
    </div>
    <div id="lets-connect" class="dark-gray">
      <h2 class="orange center-text">Let's Connect</h2>
        <ul id="footerContacts" class="flex-box">
      </ul>
    </div>
  </div>

  <!--
  The next line tells the browser where to download the JavaScript file you'll be
  writing. In resumeBuilder.js, you'll be writing code that builds the resume
  dynamically when this website, index.html, is opened.
  -->
  <script src="js/resumeBuilder.js"></script>


  <!--
  These scripts are written in JavaScript. You'll be breaking them down as part of
  a quiz. Essentially, the next few lines are checking to see if you have not
  changed each section of the resume. If you have not made any changes to a section
  of the resume, then that part of the resume does not show up. More on this in the
  course.
  -->

  <script type="text/javascript">
    // Notice how all of a sudden there's JavaScript inside this HTML
    // document? You can write JavaScript between <script> tags. At the end of your
    // JavaScript, don't forget the closing script tag with the slash (/).


    // Also, this is a JavaScript style comment. You can comment in JavaScript with:

    //   two slashes for all following characters on a single line, or

    /*
        an opening and closing set of slash asterisks for block comments.
    */


    if(document.getElementsByClassName('flex-item').length === 0) {
      document.getElementById('topContacts').style.display = 'none';
    }
    if(document.getElementsByTagName('h1').length === 0) {
      document.getElementById('header').style.display = 'none';
    }
    if(document.getElementsByClassName('work-entry').length === 0) {
      document.getElementById('workExperience').style.display = 'none';
    }
    if(document.getElementsByClassName('project-entry').length === 0) {
      document.getElementById('projects').style.display = 'none';
    }
    if(document.getElementsByClassName('education-entry').length === 0) {
      document.getElementById('education').style.display = 'none';
    }
    if(document.getElementsByClassName('flex-item').length === 0) {
      document.getElementById('lets-connect').style.display = 'none';
    }
    if(document.getElementById('map') === null) {
      document.getElementById('mapDiv').style.display = 'none';
    }
  </script>
</body>
</html>

＆＃13;

我目前正在开发一个Udacity nanodegree项目，我需要使用JS动态创建一个简历。我一直很好，直到我遇到这个目前的墙壁，如果有人可以提供协助，我会非常乐意帮助攀爬。

我正在尝试以我的名义附加联系信息，但这些元素会一直显示在我的名字之上。

这是代码的当前状态：

name = "Joel Carter";
title = "Software Developer"
mobile = "708-5xx-xx90"
email = "carter3689@gmail.com"

var formattedName = HTMLheaderName.replace("%data%", name);
var formattedTitle = HTMLheaderRole.replace("%data%", title);
var formatedMobile = HTMLmobile.replace("%data%",mobile);
var formattedEmail = HTMLemail.replace("%data%", email);

$("#header").append(formattedName);
$("#header").append(formattedTitle);
$("#topContacts").prepend(formatedMobile);
$("#topContacts").prepend(formattedEmail);

这也是HTML（几乎是为了得到这个部分）

<!DOCTYPE html>

<!--
This is an HTML document. It contains information about how elements in the website
are arranged. In other words, it describes the layout of a website.

I can't wait to see the resumes you put together!

Cameron Pittman, Udacity Course Developer
-->

<!--
The <head> of a website generally links to important resources the page will
need to load. You'll see a lot of <link>s to CSS files for styles and
<scripts> for JavaScript files to build interactions.
-->
<head>
  <!-- This tells the browser how to read the document. -->
  <meta charset="utf-8">

  <!-- Tells the browser what the title of this page should be. -->
  <title>Resume</title>

  <!-- Load the page styles. -->
  <link href="css/style.css" rel="stylesheet">

  <!--
  jQuery is a common JavaScript library for reading and making changes to the
  Document Object Model (DOM). The DOM is a tree that contains information
  about what is actually visible on a website.

  While HTML is a static document, the browser converts HTML to the
  DOM and the DOM can change. In fact, JavaScript's power comes from
  its ability to manipulate the DOM, which is essentially a JavaScript
  object. When JavaScript makes something interesting happen on a
  website, it's likely the action happened because JavaScript changed
  the DOM. jQuery is fast and easy to use, but it doesn't do anything
  you can't accomplish with vanilla (regular) JavaScript.
  -->
  <script src="js/jQuery.js"></script>

  <!-- More on helper.js in the class -->
  <script src="js/helper.js"></script>

  <!--
  Uncomment the <script> tag below when you're ready to add an interactive
  Google Map to your resume!
  -->
<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> -->

  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="main">
      <!-- You'll be deleting this line in the course -->

    <!--
    Everything from here to the <script> tag below is the skeleton of your
    website. Your code will add information to each of the sections of the
    resume below. You can pretty easily figure out what each section will
    display by looking at the id or at what's written between the <h2> tags.
    -->
    <div id="header" class="center-content clear-fix">
      <ul id="topContacts" class="flex-box"></ul>
    </div>
    <div style="clear: both;"></div>
    <div id="workExperience" class="gray">
      <h2>Work Experience</h2>
    </div>
    <div id="projects">
      <h2>Projects</h2>
    </div>
    <div id="education" class="gray">
      <h2>Education</h2>
    </div>
    <div id="mapDiv">
      <h2>Where I've Lived and Worked</h2>
    </div>
    <div id="lets-connect" class="dark-gray">
      <h2 class="orange center-text">Let's Connect</h2>
        <ul id="footerContacts" class="flex-box">
      </ul>
    </div>
  </div>

  <!--
  The next line tells the browser where to download the JavaScript file you'll be
  writing. In resumeBuilder.js, you'll be writing code that builds the resume
  dynamically when this website, index.html, is opened.
  -->
  <script src="js/resumeBuilder.js"></script>


  <!--
  These scripts are written in JavaScript. You'll be breaking them down as part of
  a quiz. Essentially, the next few lines are checking to see if you have not
  changed each section of the resume. If you have not made any changes to a section
  of the resume, then that part of the resume does not show up. More on this in the
  course.
  -->

  <script type="text/javascript">
    // Notice how all of a sudden there's JavaScript inside this HTML
    // document? You can write JavaScript between <script> tags. At the end of your
    // JavaScript, don't forget the closing script tag with the slash (/).


    // Also, this is a JavaScript style comment. You can comment in JavaScript with:

    //   two slashes for all following characters on a single line, or

    /*
        an opening and closing set of slash asterisks for block comments.
    */


    if(document.getElementsByClassName('flex-item').length === 0) {
      document.getElementById('topContacts').style.display = 'none';
    }
    if(document.getElementsByTagName('h1').length === 0) {
      document.getElementById('header').style.display = 'none';
    }
    if(document.getElementsByClassName('work-entry').length === 0) {
      document.getElementById('workExperience').style.display = 'none';
    }
    if(document.getElementsByClassName('project-entry').length === 0) {
      document.getElementById('projects').style.display = 'none';
    }
    if(document.getElementsByClassName('education-entry').length === 0) {
      document.getElementById('education').style.display = 'none';
    }
    if(document.getElementsByClassName('flex-item').length === 0) {
      document.getElementById('lets-connect').style.display = 'none';
    }
    if(document.getElementById('map') === null) {
      document.getElementById('mapDiv').style.display = 'none';
    }
  </script>
</body>
</html>

此外，这是我遇到的麻烦的截图：

非常感谢任何帮助。感谢

Answer 1

我认为你的问题是div #header已经包含了ul元素#topContacts。所以你.append（）的任何东西都会放在这个元素之后。而不是.append（）我会尝试.before（）;

$('#topContacts').before(formattedName + formattedTitle);

这将在最终版本之前插入您的姓名和头衔。然后对于无序列表#topContacts尝试：

$('#topContacts').append($('<li>').html(formattedMobile)); 
$('#topContacts').append($('<li>').html(formattedEmail));

这将在ul元素中添加一个li元素，其中包含移动和电子邮件信息的文本。

无法理解我的javascript项目的追加/前置

1 个答案: