使用jQuery slideToggle切换创建的数组

时间：2014-07-29 03:45:20

标签： javascript jquery html arrays

我正在使用表单来创建事件，包括标题，日期，时间，位置和描述。 当您按下按钮时，它会创建一个由数组生成的事件的下划线列表。 （我知道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>

1 个答案:

答案 0 :(得分：0)

尝试替换

 document.getElementById("eventsList").innerHTML=output+"</span>";

与

            $('#eventsList').html(output+"</span>");
            $('#eventsList span li').last().css("display","none");
            $('#eventsList span li').last().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>";
            $('#eventsList').html(output+"</span>");
            $('#eventsList span li').last().css("display","none");
            $('#eventsList span li').last().slideToggle();
//$new.show('slow');
            }
            </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>

希望这有帮助！

相关问题
最新问题