为什么获取到的是undefined?

来源:1-11 编程练习

苏子晨

2017-05-16 11:31

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
            <label>
                <input id="txt" type="text" name="UserName" placeholder="请输入姓名">性别:
                <select id="sex">
                    <option>女</option>
                    <option>男</option>
                </select>
            </label>
            <input id="show-btn" type="button" value="显示数据">
        </form>
        <ul id="list"></ul>
    <script>
        var json=[{
            "name": $("#txt").val(),
            "sex": $("#sex").val()
        }];
        $("#show-btn").click(function(){
            $.each(json,function(i){
                $("#list").append("<li>姓名:"+json.name+" 性别:"+json.sex+"</li>");   
            });
        });
    </script>
    </body>
</html>

求解

写回答 关注

2回答

  • 慕容8388568
    2017-05-18 21:18:41

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>挑战题</title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    </head>

    <body>

    <div>

    <span>姓名:</span>

    <span><input id="text" type="text" name="UserName" placeholder="请输入姓名"></span></br>

    <span>性别:</span>

    <span><select id="sex">

    <option>男</option>

    <option>女</option>

    </select></span></br>

    <input id="btn" type="button" value="提交">

    </div>

    <ul id="list">

    </ul>

    <script>

    $('#btn').on("click",function(){

    //方法1,直接获取,记得写在函数里面,当改变时动态获取

    var  json=[{

    "name": $("#text").val(),

    "sex": $("#sex").val()

    }]

    //方法2动态添加  var json=[];  json.push({"name": $("#text").val(),"sex":$("#sex").val()});

    $.each(json,function(index){

    $('#list').append("<li>姓名为:"+json[index].name+"</br>性别:"+json[index].sex+"</li>");

    })

    })

    </script>

    </body>

    </html>


  • 苏子晨
    2017-05-16 12:14:22

    把json放到click事件里,

    json.name和json.sex改为json[i].name和json[i].sex


jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用,加入学习,有效提高前端开发速度

69100 学习 · 400 问题

查看课程

相似问题