【发布时间】：2014-07-29 03:45:19
【问题描述】：
我正在使用表单来创建事件，包括标题、日期、时间、地点和描述。 当您按下按钮时，它会创建一个我由数组创建的事件的下划线列表。 （我知道 validEvent() 代码已不再使用，如果您能提供帮助，我计划将其更改为 jQuery，这将对我有很大帮助！）但我目前的问题是我希望利用 jQuery 来制作我制作的事件数组变成了每个创建的事件的 slideToggle 以使其看起来更好。如果有人可以帮助我，我将不胜感激！
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<style>
#forms{
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
width:335px;
height:345px;
}
#eventTitle{
width:330px;
}
#datePicker{
width:295px;
}
#timePicker{
width:295px;
}
#eventLoc{
width:330px;
}
#eventDes{
width:329px;
height:200px;
}
#listedEvents{
}
</style>
<meta charset="utf-8">
<title>My Event Page</title>
<script>
var events = [];
var addEvent = function(){
this.title="Sample Event Title";
this.date="07-08-1988";
this.time="06:30 pm";
this.location="Sample Event Location";
this.description="Sample Event Description";
};
var testEvent = new addEvent;
var counter = 0;
function validEvent(){
var eventTitle=document.forms["newEvent"]["eventTitle"].value;
var datePicker=document.forms["newEvent"]["datePicker"].value;
var timePicker=document.forms["newEvent"]["timePicker"].value;
var eventLoc=document.forms["newEvent"]["eventLoc"].value;
var eventDes=document.forms["newEvent"]["eventDes"].value;
if (eventTitle.length < 0){
alert("Must have a title!")
}
if (eventLoc.length < 9){
alert("Location must be atleast ten characters!");
}
if (eventDes.length < 9){
alert("Description must be atleast ten characters!");
}
addAnotherEvent();
}
function addAnotherEvent() {
events[counter]=new addEvent();
events[counter].title=document.forms["newEvent"]["eventTitle"].value;
events[counter].date=document.forms["newEvent"]["datePicker"].value;
events[counter].time=document.forms["newEvent"]["timePicker"].value;
events[counter].location=document.forms["newEvent"]["eventLoc"].value;
events[counter].description=document.forms["newEvent"]["eventDes"].value;
counter++;
showEvents();
}
function showEvents(){
var output="<span>";
for (listItems=0;listItems<events.length;listItems++){
output = output+"<li id='"+ events[listItems].title+"'>"+events[listItems].title
+" -- <p>"+events[listItems].description+"</p><p>"+events[listItems].date+"</li>";
}
document.getElementById("eventsList").innerHTML=output+"</span>";
}
</script>
</head>
<body>
<div id="forms">
<form name="newEvent" align="left">
<input type="text" id="eventTitle" name="eventTitle" maxlength="50" placeholder="Enter an event title"><br>
<input type="date" id="datePicker" name="datePicker"> Date<br>
<input type="time" id="timePicker" name="timePicker"> Time<br>
<input type="text" id="eventLoc" name="eventLoc" maxlength="100" placeholder="Enter an event location"><br>
<textarea id="eventDes" name="eventDes" cols="20" rows="10" tabindex="101" placeholder="Enter an event description" maxlength="200"></textarea><br>
<input type="button" onClick="addAnotherEvent()" value="Create New Event">
</form>
</div>
<div id="listedEvents">
<ul id="eventsList">
</ul>
</div>
【问题讨论】：
标签： javascript jquery html arrays