我有这个javascript代码，当有人在文本区域中输入文本并单击附加A或B按钮时，我想在生活故事的开头或结尾附加一个文本。我还想在单击删除按钮时删除列表中的最后一个段落。
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>
<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>
#page-wrap { width: 60%; margin: 80px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
</style>
</head>
<body>
<header id="header">
<div>
<hgroup id="hgroup">
<h1><a id="h">LIFE STORE</a></h1>
</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>
Append，Delete按钮和textarea都隐藏了。当您单击Add While时，它们将显示在底部。
这是我删除的内容，但它不起作用
var dele = function () {
var par = $("story").getElementsByTagName("p");
var getStory = $("story");
var size = par.length;
if (size > 0) {
getStory.removeChild(par[size - 1]);
}
};
我没有任何附加文字。
答案 0 :(得分：2)
追加新文字和删除最后文字的解决方案如何？ Hpe有帮助。
var par;
$(document).ready(function () {
$(".myClass").click(function(){
if($(this).prop("id") === "bButton"){
$("#myText").append("<p>" + $("#newText").val() + "</p>");
$('#newText').val('');
}
else if($(this).prop("id") === "aButton"){
$("#myText").append("<p>" + $("#newText").val() + "</p>");
$('#newText').val('');
}
else if($(this).prop("id") === "delete"){
$("#myText").find("p").last().remove();
$('#newText').val('');
}
});
$(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();
}
});
}); 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;
}
#page-wrap { width: 60%; margin: 80px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="header">
<div>
<hgroup id="hgroup">
<h1><a id="h">LIFE STORE</a></h1>
</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>
<span id = "myText"></span>
</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" placeholder="Enter some text"></textarea>
<div class= "buttions">
<input type= "button" class = "myClass" id = "bButton" value = "Append At B">
<input type= "button" class = "myClass" id = "aButton" value = "Append At A">
<input type= "button" class = "myClass" 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>
答案 1 :(得分：1)
将删除功能更改为
var dele = function () {
$("#story")
.find("p")
.last()
.remove();
};