1
我有这个javascript代码，我想追加一个文本在生活故事的开始或结尾，当有人在文本区域输入文本并单击一个追加A或B按钮。我也想删除列表中最后一个段落时点击删除按钮。Javascript，jquery追加和删除
var par;
$(document).ready(function() {
$(document).on('click', 'a', function(e){
e.preventDefault;
if($(this).text() === "Add Though") {
$(this).text("Hide");
$(document).find($(this).attr('data-target')).fadeIn(2000).show();
}
else if ($(this).text() === "Show full story") {
$(this).text("Hide some");
$(document).find($(this).attr('data-target')).fadeIn(1800).show();
}
else if ($(this).text() === "Hide some") {
$(this).text("Show full story");
$(document).find($(this).attr('data-target')).slideDown().hide();
}
else {
$(this).text("Add Though");
$(document).find($(this).attr('data-target')).slideUp().hide();
}
});
document.getElementById("delete").onclick = dele ;
});
var dele = function() {
var par = $("story").getElementsByTagName("p");
var getStory = $("story");
var size = par.length;
if (size > 0) {
getStory.removeChild(par[size - 1]);
}
};body {
width: 80%;
align-content: center;
margin: auto;
border: solid gray;
}
#nlist {
text-align: center;
font-family: inherit;
background-color: gray;
text-transform: uppercase;
font-size: 23px;
align-content: center;
}
#nlist a:hover {
color: white;
}
#header {
text-align: center;
font-family: fantasy;
font-size: 100%;
height: 10%;
}
article {
text-align: center;
text-align: left;
}
article img {
float: right;
margin: 3em 0 1em 1em;
width: 20%;
border: 1px solid black;
}
section{
text-align: center;
padding: 10px;
}
div.hide {
display: none;
}
#newText {
width: 100%;
height: 50px;
}
div.newStory {
display: none;
width: 60%;
padding:10px;
border: 1px solid gray;
}
div.buttions, div.add {
padding: 5px 2px 1px 2px;
}
div.style {
padding: 2px 0px 4px 0px;
}
#page {
display: none;
}<!DOCTYPE html>
<meta charset="UTF-8">
<title>Life Story</title>
\t <link rel="stylesheet" href="style/Style.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jScript/javaScript.js"></script>
<style>
\t
\t \t #page-wrap { width: 60%; margin: 80px auto; position: relative; }
\t
\t \t #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
\t \t #l, #r { width: 49%; }
\t \t #l { float: left; }
\t \t #r { float: right; }
\t \t
\t \t #l:before, #r:before { content: ""; width: 125px; height: 250px; }
\t \t
\t \t #l:before { float: right; }
\t \t #r:before { float: left; }
\t
\t </style>
</head>
<body>
<header id="header">
<div>
<hgroup id="hgroup">
\t \t \t <h1><a id="h">LIFE STORE</a></h1>
\t \t </hgroup>
</div>
</header>
<div id="ndiv">
<nav id="nlist">
<a href="#store" style="text-decoration: none">Story</a>
<a href="#carrer" style="text-decoration: none">Career</a>
<a href="#deu" style="text-decoration: none">Education</a>
<a href="#contact" style="text-decoration: none">Contact</a>
</nav>
</div>
<section>
<h1> <a id="store">Coming To United State</a></h1>
<article>
<div id = "story">
<p>Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George. Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p>
<p>Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey.
</p>
<p>Sometime letting things go can solve the problem and something it does not. But if something like that happen to me today, I will definitely respond, but in a good way by telling the person not to call me that again. <a id ="full" href="#" data-target ="#fullStory"
style="text-decoration: none">Show full story</a>
</p>
</div>
<div class = "hide" id = "fullStory">
<p>I lived in Africa for sixteen years, but the four years I have spent in United States
have taught me more the previous sixteen years I did in Africa, so much more.
Someone once told me that love is spending time with people and doesn’t care about
being annoyed. Ms. Fosdal took me out of darkness and brought me to light by teaching
me how to read, communicate, and write the English language. I think she is the
perfect example that fits the definition. I believe that majority of people around
the globe have encounter difficulties in life, in order for them to achieve the goals
they set for themselves. Nevertheless, I thought that my problem was the most
difficult one.</p>
<p>So now you know how my new life in the United States has taught me to overcome problems
and taught me to help others. I have seen myself in a better position through what I
have learned in this great country. I have learned how to build computers and navigate
the Internet which I never knew before. Moreover, I believe that the longer I stay in
the United States, the better I will become.</p></div>
<div class = "newStory" id = "addNote">
<div class= "style">
<select id="family" name="fonts">
<option value="1">Arial</option>
<option value="2">Times New Roman</option>
<option value="3">Helvetica</option>
<option value="4">Calibri</option>
<option value="5">Apple Chancery</option>
<option value="6">MingLiU_HKSCS</option>
</select>
<select id="size" name="fonts">
<option value="1">11</option>
<option value="2">12</option>
<option value="3">14</option>
<option value="4">16</option>
<option value="5">18</option>
<option value="6">20</option>
</select>
<input type= "button" id = "bold" value = "Bold Text">
<input type= "button" id = "itali" value = "Italics">
</div>
<textarea id= "newText">Enter some text</textarea>
<div class= "buttions">
<input type= "button" id = "bButton" value = "Append At B">
<input type= "button" id = "aButton" value = "Append At A">
<input type= "button" id = "delete" value = "Delete Last Paragraph">
</div>
</div>
<div class ="add">
<nav id="thing">
<a href="#comment" data-target ="#addNote" style="text-decoration: none">Add Though</a>
</nav>
</div>
</article>
</section>
</body>
</html>追加，删除按钮，和文本区域都藏了起来。当你点击添加虽然在底部他们将是可见的。
这是我有删除，但它不工作
var dele = function() {
var par = $("story").getElementsByTagName("p");
var getStory = $("story");
var size = par.length;
if (size > 0) {
getStory.removeChild(par[size - 1]);
}
};
我没有为附加文字东西。
变量'par'是未定义的。你忘了给它分配一个值吗？ – jkris
不是。这是唯一声明它的地方 – Jabateh
我只是给它赋值，但它仍然不起作用。 var par = $（“story”）。getElementsByTagName（“p”）; – Jabateh