Question

我有项目列表

每个人都包含＆＃34;标题＆＃34;，＆＃34; loc＆＃34;和＆＃34;添加按钮＆＃34;。

当我点击＆＃34;添加按钮＆＃34;我希望这是正确的＆＃34; li＆＃34;值将显示在下面的表格中（每个值都已标识：＆＃34; data-type =＆＃34;）

<li>
    <div class="timeline-badge">
    </div>
    <div class="timeline-panel-pointer">
        <div class="timeline-heading">
            <h4 class="timeline-title dropdown">
                <span data-type="title">some text here</span>
            </h4>
            <p><small class="text-muted"><span data-type="loc">Rome</span></small></p>
        </div>
        <p class="mt20">
            <button type="button" class="btn btn-info secBtn"  data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button>
        </p>                                        
    </div>
</li>

<li>
    <div class="timeline-badge">
    </div>
    <div class="timeline-panel-pointer">
        <div class="timeline-heading">
            <h4 class="timeline-title dropdown">
                <span data-type="title">some text here 2</span>
            </h4>
            <p><small class="text-muted"><span data-type="loc">Milan</span></small></p>
        </div>
        <p class="mt20">
            <button type="button" class="btn btn-info secBtn"  data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button>
        </p>                                        
    </div>
</li>

FORM：

<!-- Modal -->
<div class="modal fade" id="manageSec-model" role="dialog">
    <div class="modal-dialog modal-md">

        <!-- Modal content-->
        <form id="manageSec-form" class="modal-content" action="index.php?page=itinPage&itinID=<?PHP echo $_GET['itinID'] ?>"  method="post" enctype="multipart/form-data" >
            <div class="modal-body">

                <div class="form-group">
                    <label for="exampleInputEmail1">LOCATION</label>
                    <input type="text" name='sec_details[loc]' value="" class="form-control" />
                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">TITLE</label>
                    <div class='input-group'>
                        <input type="text" class="form-control" name='sec_details[title]' value="" >
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

SCRIPT

$(document).on('click','.secBtn',function(e) {


        alert($(this).parents("li").find("data-type=title").val());

});

Answer 1

你需要改变你的jQuery。找到下面的代码段。

＆＃13;

$(document).on('click','.secBtn',function(e) {

  var title = jQuery(this).parent().parent().find('span[data-type="title"]').html();
  var location = jQuery(this).parent().parent().find('span[data-type="loc"]').html();

  jQuery('#manageSec-model').find('input[name="sec_details[loc]"]').val(location);
  jQuery('#manageSec-model').find('input[name="sec_details[title]"]').val(title);

});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<li>
    <div class="timeline-badge">
    </div>
    <div class="timeline-panel-pointer">
        <div class="timeline-heading">
            <h4 class="timeline-title dropdown">
                <span data-type="title">some text here</span>
            </h4>
            <p><small class="text-muted"><span data-type="loc">Rome</span></small></p>
        </div>
        <p class="mt20">
            <button type="button" class="btn btn-info secBtn"  data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button>
        </p>                                        
    </div>
</li>

<li>
    <div class="timeline-badge">
    </div>
    <div class="timeline-panel-pointer">
        <div class="timeline-heading">
            <h4 class="timeline-title dropdown">
                <span data-type="title">some text here 2</span>
            </h4>
            <p><small class="text-muted"><span data-type="loc">Milan</span></small></p>
        </div>
        <p class="mt20">
            <button type="button" class="btn btn-info secBtn"  data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button>
        </p>                                        
    </div>
</li>


<!-- Modal -->
<div class="modal fade" id="manageSec-model" role="dialog">
    <div class="modal-dialog modal-md">

        <!-- Modal content-->
        <form id="manageSec-form" class="modal-content" action="index.php?page=itinPage&itinID=<?PHP echo $_GET['itinID'] ?>"  method="post" enctype="multipart/form-data" >
            <div class="modal-body">

                <div class="form-group">
                    <label for="exampleInputEmail1">LOCATION</label>
                    <input type="text" name='sec_details[loc]' value="" class="form-control" />
                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">TITLE</label>
                    <div class='input-group'>
                        <input type="text" class="form-control" name='sec_details[title]' value="" >
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

＆＃13;

jQuery - 使用html中的数据填充表单输入

1 个答案: