jQueryのは - 私は、「タイトル」、「LOC」と「ボタンの追加」を含むアイテム</p> <p>それぞれのリストを持っているHTML

Question

からのデータを使用して、フォームの入力を記入してください。

私は右の「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</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：

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


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

}); 

Answer 1

<!-- 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は、あなたはあなたにはjQueryを変更する必要があります。以下のスニペットを検索してください。

$(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); 
 

 
});

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