Question

我在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>

Answer 1

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

您将其设置为输入类型=＆＃39; text＆＃39;的innerHTML。元件？输入类型的innerHTML =＆＃39; text＆＃39; element应始终作为空字符串返回。

我认为你应该使用.val（）

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

Answer 2

哦，等等抱歉我没有足够近地看它......可能是因为有多个输入类型=＆＃39;文本元素＆＃39; ...这意味着它＆＃39; 39;匹配多个元素。为了证实我的理论，你应该能够尝试这个......

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

通过添加.eq（0），它应该只对第一个输入类型=＆＃39; text＆＃39;元素是id =＆＃39; name＆＃39;

的元素

Answer 3

发现您的问题，名称不能用作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);

将数据从数据库添加到文本框 - Jquery

3 个答案: