为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/jQuery

/jQuery基础课程

求大神帮忙看下这个代码。。。。

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>挑战题</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			* {
				font: 15px "微软雅黑";
				line-height: 1.5;
			}
			
			input {
				margin: 5px 0px;
			}
			
			#submit {
				margin: 20px 0px 0px 186px
			}
			
			#count {
				color: red;
			}
		</style>
	</head>

	<body>
		<span>请输入学生姓名：</span>
		<input id="stuName" type="text"></input>
		<br/>
		<span>请输入学生分数：</span>
		<input id="stuScore" type="text"></input>
		<br/>
		<input id="submit" type="button" value="提交"></input>
		<input id="print" type="button" value="打印"></input>
		<div>
			<p>已经提交了<span id="count"></span>个学生的信息，点击打印按钮将信息打印出来：</p>
			<ol id="list">
				</ul>
				<script>
					$(function() {
						var counter=0;
						$("#count").html(counter);
						$("#submit").bind("click", function() {
						PrintJson();
						});
						// 添加json数据
						function buildJson() {
							var jsonStu = [];
							var name=$("#stuName").val(),score=$("#stuScore").val();
							$("#submit").bind("click",function(){
								addJsonElements(jsonStu,name,score);
								$("#stuName").html("");
								$("#stuScore").html("");
								$("#count").html(counter++);
							})
							return jsonStu;
							
						}
						//向json中添加元素
						function addJsonElements(objArr,stuName,stuScore){
							objArr.Push({
								name:stuName,
								score:stuScore
							});
						}
						//打印Json
						function PrintJson(){
							$.each(buildJson() , function(index, stu) {
								$("#list").append("<li>姓名："+stu.name+" 成績："+stu.score);
							});
						}
					});
				</script>
		</div>
	</body>

</html>


Betsey

2016-02-29

源自：jQuery基础课程  8-11

关注问题 我要回答
267
操作
收起

正在回答

5 回答

白瑞爷 回答被采纳 +3 积分
2016-03-01 
<script>
                    $(function(){
                        var jsonStu=[],counter=0;
                        var counter=0;
                        var l;  //新声明了一个变量
                        $("#count").html(counter);
                        $("#submit").bind("click",function(){
                            var name=$("#stuName").val(),score=$("#stuScore").val();
                            addJsonElement(jsonStu,name,score);
                            $("#stuName").val("");
                            $("#stuScore").val("");
                            $("#count").html(++counter);
                         });
                        $("#print").bind("click",function(){
                            l = $("li").length;  //将页面中<li>标签的个数获取
                            if(l==0){  //如果没有<li>标签，说明还没有打印过，就把json里的数据全部打印
                                $.each(jsonStu, function(index,stu) {
                                $("#list").append("<li>学生姓名："+stu.name+" 学生成绩："+stu.score+"</li>");
                                });
                            }else{   //否则
                                $.each(jsonStu, function(index,stu) { 
                                    if(index>=l){   //在遍历的时候加一次判断，当在json中遍历到多于<li>标签个数的对象时，也就新加入的对象，再进行打印出来
                                        $("#list").append("<li>学生姓名："+stu.name+" 学生成绩："+stu.score+"</li>");
                                    } 

                                });   
                            }
                        })
                        function addJsonElement(objArr,stuName,stuScore){
                            objArr.push({
                                name:stuName,
                                score:stuScore
                            });
                        }
                    });
                </script>

按照你的要求，我把print绑定的函数修改了一下，如果你理解了.each里参数的意思，就能搞懂啦~

另外<ol></ul>这样写标签是不正确的，你想显示数字,<ol></ol>标签就是显示一个有序列表，<ul></ul>是显示无序列表，HTML里的标签还是要成对写，虽然可能效果上没什么区别，但我们还是按照标准来编码比较好呢~希望帮到你~

^_^

0 回复 有任何疑惑可以回复我~
收起回答
#1

Betsey 提问者

谢谢你啦~~~
2016-03-01 回复 有任何疑惑可以回复我~
#2

白瑞爷 回复 Betsey 提问者

客气了~有帮助就好~多多交流才能一起进步~
2016-03-01 回复 有任何疑惑可以回复我~
Betsey 提问者
2016-02-29

其实我想打印这个，为什么慕课没有@功能啊，@白瑞爷。。。。。

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>挑战题</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			* {
				font: 15px "微软雅黑";
				line-height: 1.5;
			}
			
			input {
				margin: 5px 0px;
			}
			
			#submit {
				margin: 20px 0px 0px 186px
			}
			
			#count {
				color: red;
			}
		</style>
	</head>

	<body>
		<span>请输入学生姓名：</span>
		<input id="stuName" type="text"></input>
		<br/>
		<span>请输入学生分数：</span>
		<input id="stuScore" type="text"></input>
		<br/>
		<input id="submit" type="button" value="提交"></input>
		<input id="print" type="button" value="打印"></input>
		<div>
			<p>已经提交了<span id="count"></span>个学生的信息，点击打印按钮将信息打印出来：</p>
			<ol id="list">
				</ul>
				<script>
					$(function(){
						var jsonStu=[],counter=0;
						$("#count").html(counter);
						$("#submit").bind("click",function(){
							var name=$("#stuName").val(),score=$("#stuScore").val();
							addJsonElement(jsonStu,name,score);
							$("#stuName").val("");
							$("#stuScore").val("");
							$("#count").html(++counter);
						});
						$("#print").bind("click",function(){
							$.each(jsonStu, function(index,stu) {
								$("#list").append("<li>学生姓名："+stu.name+" 学生成绩："+stu.score+"</li>");
							});
						})
						function addJsonElement(objArr,stuName,stuScore){
							objArr.push({
								name:stuName,
								score:stuScore
							});
						}
					});
				</script>
		</div>
	</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
白瑞爷
2016-02-29

第一个回答不太好，按照你脚本里的逻辑我重新改了，这次那个小bug也解决了~但就只需要一个按钮就好

<body>
        <span>请输入学生姓名：</span>
        <input id="stuName" type="text"></input>
        <br/>
        <span>请输入学生分数：</span>
        <input id="stuScore" type="text"></input>
        <br/>
        <input id="submit" type="button" value="提交并打印"></input>
        <!--<input id="print" type="button" value="打印"></input>-->
        <div>
            <p>已经提交了<span id="count"></span>个学生的信息，点击打印按钮将信息打印出来：</p>
            <ol id="list">
                </ol> <!--这里标签写错-->
                <script>
                    $(function() {
                        var counter=0;
                        $("#count").html(counter);
                        $("#submit").bind("click", function() {
                             PrintJson();
                        });
                        
                        // 添加json数据
                        function buildJson() {
                            var jsonStu = [];
                            var name=$("#stuName").val(),
                                score=$("#stuScore").val();
                            //$("#submit").bind("click",function(){  这里是逻辑错误，为什么再次给“提交”绑定事件呢？
                                addJsonElements(jsonStu,name,score);
                                $("#stuName").val("");//这里不是.html()
                                $("#stuScore").val("");//同上
                                $("#count").html(++counter); //这里要前置自加
                            //})
                            return jsonStu;  
                             
                        }
                        //向json中添加元素
                        function addJsonElements(objArr,stuName,stuScore){
                            objArr.push({   //你原代码中函数名写错，是全小写的push，javaScript中是区分大小写的
                                name:stuName,
                                score:stuScore
                            });
                        }
                        //打印Json
                        function PrintJson(){
                            $.each(buildJson(), function(index, stu) { 
                                $("#list").append("<li>姓名："+stu["name"]+" 成績："+stu["score"]);
                            });
                        }
                    });
                </script>
        </div>
    </body>


0 回复 有任何疑惑可以回复我~
收起回答
#1

Betsey 提问者

感谢大神！ 还有一些问题，ol的那个标签我是特意这么写的，为的是显示数字，哈哈，觉得这样应该没什么问题吧？还有就是，两个按钮我是这个意思，提交按钮是吧之前所有输入的表单信息存入数组，点击打印再把数组打印出来，说实在的，后面的那个printJson函数我是看别人这么写的，但是还是不懂后面的传参为什么有index和stu，这两个是什么鬼啊？
2016-02-29 回复 有任何疑惑可以回复我~
#2

白瑞爷 回复 Betsey 提问者

index是遍历时的索引值，stu就是遍历到该索引时，json里的对象
2016-03-01 回复 有任何疑惑可以回复我~
白瑞爷
2016-02-29

抱歉，上面有一点小错误，不是全部变量，是全局变量。。。

0 回复 有任何疑惑可以回复我~
收起回答
白瑞爷
2016-02-29 
<div>
            <p>已经提交了<span id="count"></span>个学生的信息，点击打印按钮将信息打印出来：</p>
            <ol id="list">
                </ol> <!--这里标签写错-->
                <script>
                    $(function() {
                        var jsonStu = [];//你的代码里把这个json数组声明为局部变量了，因为有多个函数用到，需要是全部变量
                        var counter=0;
                        $("#count").html(counter);
                        $("#submit").bind("click", function() {
                         buildJson();//你原代码中有逻辑错误，“提交”按钮应该只是把输入push到json中去
                        });
                        $("#print").bind("click", function() {
                         PrintJson();//把“打印”按钮绑定为这个函数
                        });
                        // 添加json数据
                        function buildJson() {
                            
                            var name=$("#stuName").val(),
                                score=$("#stuScore").val();
                            //$("#submit").bind("click",function(){  这里是逻辑错误，为什么再次给“提交”绑定事件呢？
                                addJsonElements(jsonStu,name,score);
                                $("#stuName").val("");
                                $("#stuScore").val("");
                                $("#count").html(++counter);
                            //})
                            //return jsonStu;    这个buildJson函数不需要返回值
                             
                        }
                        //向json中添加元素
                        function addJsonElements(objArr,stuName,stuScore){
                            objArr.push({   //你原代码中函数名写错，是全小写的push，javaScript中是区分大小写的
                                name:stuName,
                                score:stuScore
                            });
                        }
                        //打印Json
                        function PrintJson(){
                            $.each(jsonStu, function(index, stu) {  //你没有真正了解each函数的各参数需要传入的是什么，第一个参数需要传入的是一个Json数据，而不能是函数
                                $("#list").append("<li>姓名："+stu["name"]+" 成績："+stu["score"]);
                            });
                        }
                    });
                </script>
        </div>

改了很多地方，希望能帮到你

我只是改成能够基本实现你要求的效果，但是最后有一个不太好的效果就是每按一次“打印”按钮，会把之前添加的数据又重新打印一遍，这需要逻辑上去调整一下，加一些检测等，希望能自己考虑一下

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习，有效提高前端开发速度

进入课程

求大神帮忙看下这个代码。。。。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信