4

我在 Jquery 中创建了一个动态列表，当用户单击一个项目时，它会将他们带到一个新页面，其中显示了他们选择的列表选项的特定项目。到目前为止，我让它们显示在各种段落和标题属性等中，只是为了测试。

我想要做的是使用它们的标签获取当前正在显示的数据，而不是将它们放在表单内的文本框中。

呈现数据并将它们提交给属性等的代码示例是：

    <script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/test/login/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.name = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        //dealObject.dname = $(this).find('input').html();
                        dealObject.dname = $(this).find('input').val();

                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
        //$('#index2 [data-role="content"]').html('You have selected Link' + dealObject.dname);
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
        //$('#index2 [data-role="content"]').find('#description').html(dealObject.dname);
        $('#index2 [data-role="content"]').find('#name').html(dealObject.dname);
    });

    var dealObject = {
        dealID : null,
        restaurantid : null,
        name : null,
        image : null,
        dname : null
    }    
</script>

这是索引 2 html 的片段，直到内容 div 的末尾：

 <div data-role="page" id="index2">

<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">

        <?php
    if( !isset( $_SESSION ) ){
     session_start();
        }

    if( isset( $_SESSION['username'] ) ){
        echo ".";
        } ?>   

        <label for="name">Deal Name:</label>
        <input type="text" value="" name="name" id="name"/>
        <label for="desc">Description</label>
        <input type="text" value="" name="desc" id="desc"/>  
        <a data-role="button" id="submit-button" data-theme="b">Submit</a>

        <img src="" width="100px" height="100px" id="deal-img">
        <h1 id="title"></h1>
        <h3 id="description"></h3>
        <p id="name"></p>
       </div>
4

3 回答 3

0 
dealObject.dname = $(this).find('input').html();

您将其设置为 input type='text' 元素的 innerHTML 吗？输入 type='text' 元素的 innerHTML 应始终作为空字符串返回。

我认为你应该使用 .val()

dealObject.dname = $(this).find('input').val();
于 2013-02-18T23:46:28.323 回答
0

哦，等一下，对不起，我看的不够仔细......这可能是因为有多个输入类型='文本元素'......这意味着它匹配多个元素。为了证实我的理论，你应该可以试试这个......

dealObject.dname = $(this).find('input').eq(0).val();

通过添加 .eq(0) 它应该只对第一个输入 type='text' 元素执行此操作，该元素是 id='name'

于 2013-02-19T00:39:04.383 回答
0

发现你的问题，name不能作为js对象内的变量名。

改变：

var dealObject = {
    dealID : null,
    restaurantid : null,
    name : null,
    image : null,
    dname : null
}

像这样：

var dealObject = {
    dealID : null,
    restaurantid : null,
    shortname : null,
    image : null,
    dname : null
}

也使用这个：

$('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
$('#index2 [data-role="content"]').find('input#name').val(dealObject.dealName);
$('#index2 [data-role="content"]').find('input#did').val(dealObject.dealID);
于 2013-02-19T13:10:59.120 回答