javascript - 通过 jQuery 从 div 获取数据到模态

Question

我有 PHP 生成的 div，其中包含一些来自数据库的数据。他们每个人都有唯一的ID。我需要从选定的 div 获取数据(我有这个编码)并通过它的 ID 将数据从这个 div 放入模态。

模态:

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="form-horizontal" id="edit-form">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
            </div>
          </div>
          <div class="form-group">
            <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
            </div>
          </div>
          <div class="form-group">
            <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
            </div>
          </div>
          <div class="form-group">
            <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
            </div>
          </div>
          <div class="form-group">
            <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
            </div>
          </div>
          <div class="form-group">
            <label for="b" class="col-sm-2 control-label">Płeć</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
            </div>
          </div>
          <div class="form-group">
            <label for="d" class="col-sm-2 control-label">Typ Konta</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
          <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
        </div>
      </form>
    </div>
  </div>
</div>

调用模态输出的函数:

function edit(){
    $('#edit-modal').modal('show');
}

其中一个div:

<div class="panel panel-kol" mid="4"><div class="panel-body profile white">
  <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
  <div class="profile-data">
    <div class="profile-data-name" style="font-weight: bold;">Krzysztof Marczewski</div>
    <div class="profile-data-title">Recepcjonista</div>
  </div>
</div>                                
<div class="panel-body">                                    
  <div class="contact-info text-center" style="margin-top: -20px;">
    <p><small>Telefon komórkowy</small><br>997998999</p>
    <p><small>Od - Do</small></p>
    <div class="row">
      <div class="col-md-2"></div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" value="00:00:12">
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" value="00:00:19">
          </div>
        </div>
        <div class="col-md-2"></div>
      </div>            
    </div>
  </div>
</div>

“mid”是分配给 PHP 生成的每个 div 的唯一 ID。我只需要从已经生成的 div 中获取数据到模态

SS:

ss v2.

Answer 1

看这个，如果我理解正确的话......

$(document).ready(function(){
function edit(){
            $('#edit-modal').modal('show');
        }
function insertData(mid){
  var panel = $('.panel[data-mid="'+mid+'"]'),
      fullName = panel.find('.full-name').text(),
      arrName = fullName.split(" "),
      modal = $('#edit-modal');
				
  modal.find('#add-firstname').val(arrName[0]);
  modal.find('#add-nazwisko').val(arrName[1]);
  modal.find('#add-pesel').val(panel.find('.phone').text());
  modal.find('#g').val(panel.find('.start-time').val());
  modal.find('#t').val(panel.find('.end-time').val());
}
				
				edit();
				insertData(4);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" id="edit-form">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
              </div>
              <div class="modal-body">
                    <div class="form-group">
                        <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="b" class="col-sm-2 control-label">Płeć</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="d" class="col-sm-2 control-label">Typ Konta</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
              </div>
            </form>
        </div>
      </div>
    </div>
		
		<div class="panel panel-kol" data-mid="4"><div class="panel-body profile white">
                                <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
                                <div class="profile-data">
                                    <div class="profile-data-name full-name" style="font-weight: bold;">Krzysztof Marczewski</div>

                                    <div class="profile-data-title">Recepcjonista</div>
                               </div>
                            </div>                                
                            <div class="panel-body">                                    
                                <div class="contact-info text-center" style="margin-top: -20px;">
																<p><small>Telefon komórkowy</small><br><span class="phone">997998999</span></p>
                                    <p><small>Od - Do</small></p>
                                    <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control start-time" value="00:00:12">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control end-time" value="00:00:19">
                                        </div>
                                    </div>
                                     <div class="col-md-2"></div>
                                </div>            
                        </div>
                    </div>
                </div>