Question

坚持使用jQuery $.getJSON在同一页面中显示配置文件（来自使用append()的服务器的数据），因为我是这个平台的新手。注释掉我卡住的区域，

<body>
    <div id="homepage">
    <button id="home">Home</button>
    </div>

    <div data-role="content" id="old_content" style="text-align: center">

        <button data-icon="arrow-d">Select Below Options</button>
        <div data-role="fieldcontain">
            <select name="select-choice-1" id="select-choice-1">
                <!-- <option>--Course--</option> -->
                <option value="mba">MBA</option>
                <option value="msc">MSc</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <select name="select-choice-1" id="select-choice-2">
                <!-- <option>--Country--</option> -->
                <option value="India">India</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
                <option value="China">China</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <select name="select-choice-1" id="select-choice-3">
                <!-- <option>--Year--</option> -->
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
            </select>
        </div>

        <button id="go" data-theme="b">Go</button>

    </div>

    <div id="new_content">
    </div>

    <div id="profile">
    </div>


    <div data-position="fixed" data-theme="b" data-role="footer"
        data-transition="pop">
        <h4>© 2013 example.</h4>
    </div>
</div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script
        src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
            app.initialize();
        </script>
<script type="text/javascript">
var numRecords = 5 ;
var maxPage = 0 ;
var pro = 0 ;

$course = $('#select-choice-1').val();
$country = $('#select-choice-2').val();
$year = $('#select-choice-3').val();

$(document).ready(function(){
    $("#go").click(function(){
        $("#old_content").hide();
        listStudents(0) ;
    });
    });

function listStudents(start) {

    $.getJSON( "http://example.com/api.php?course="+$course+"&year="+$year+"&country="+encodeURIComponent($country), function( data ) {
    $("#new_content").show();
    $("#new_content").html('');
    maxPage = start + numRecords ;
    for(i=start;i<=maxPage;i++)
        {
        $("#new_content").append("<ul id='new_output_content' onclick='profile("+i+")'><li><img height='50px' width='50px' src="+data[i].profile_image+'/>'+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+data[i].name+"</li></ul><br/>");
        }
    $("#new_content").prepend('<button data-theme="b" style="margin-left: 100px;margin-top: 40px;text-align: center;height: 40px;width: 153px;" data-role="button" onclick="listStudents(maxPage)">Next</button>');
    });
}

function profile(pro) {

//This is where I stuck.

var profile = "<div id='new_profile' data-role='content' align='center'><img src='"+data[pro].profile_image+"' /><br /><strong>"+data[pro].name+"</strong><br/><br/>Mail ID:<br/><strong>"+data[pro].email+"</strong><br/>Position:<br/><strong>"+data[pro].position+"</strong><br/>Course:<br/><strong>"+data[pro].course+"</strong><br/>Year of Passed Out:<br/><strong>"+data[pro].course_year+"</strong><br/>Country:<br/><strong>"+data[pro].country+"</strong><br/></div>";
    $('#profile').append(profile);
    }


$(document).ready(function(){
    $("#home").click(function(){

        $("#new_content").hide();
        $("#old_content").show();

    });
});


</script>
</body>
</html>

我想通过在点击特定学生时隐藏其他'id'来单独显示个人资料。请有人帮忙。

Answer 1

你可以打印你收到的数据吗？首先，我将再次采用另一种方式来循环抛出json对象......第79行左右的脚本......

为（I = 0; I＆LT = data.length;我++）

data [pro] .profile_image / name / etc //您没有将数据存储为功能配置文件中的数据......

function profile(pro) {

（pro）变量实际上是数字0 =＆gt; maxPage所以任何数据[pro]都是未定义的......

Jquery append（）配置文件（来自服务器的数据使用$ .getJSON）在同一页面中

1 个答案: