javascript - 从 bootstrap-modal 获取页面中选定的项目

Question

我使用 Bootstrap 模式为用户提供选择任何所需项目并将所选项目添加到父/当前页面的功能。

我在 fiddle 上创建了一个示例以便更好更快地理解。 例如:有 2 个项目(每个项目三个 li)。当用户选择某个项目时，模式必须关闭，其价格(从另一个页面获取)必须显示在方框上，并且必须在左侧添加一个新框(使用当前的glyphicon )。

我以某种方式理解这必须使用 jQuery 来实现，但我不知道应该如何进一步进行。我对 modals 和 jQuery 都是新手，所以有人对此有任何想法吗？

更新:

我确实尝试过，我能够从 modal 获取所选项目并将其添加到父/当前 View ，但第二次无法正常工作(第二次)盒子)。这是updated fiddle 。这是更新后的代码:

jQuery:

var itemLayout = '<div class="square"><div class="content"><div class="table"><div class="table-cell numbers"><div class="glyphicon glyphicon-plus prices"></div></div></div></div></div>';
$(document).ready(function() {
  $(".layout").append(itemLayout);

  $(".square").click(function() {
    $("#myModal").modal('show');

  });
  fetchPrice();
});

function fetchPrice() {
  var users = $('.prices');
  $(document).on('click', '.fetch', function() {
    var stylesheet = $(this).text();
    console.log(stylesheet);
    $("#myModal").modal('hide');
    users.removeClass('glyphicon glyphicon-plus').text(stylesheet);
    $(itemLayout).insertAfter('.square');
    $(".square").click(function() {
      $("#myModal").modal('show');

    });
  });
}

HTML:

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <div class="layout"></div>
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Select to display</h4>
          </div>
          <!-- modal-header end -->
          <div class="modal-body">
            <ul class="list-group">
              <li class='list-group-item list-group-item-info clearfix'>
                <div class="pull-left">Chinese</div>
              </li>
              <li class='list-group-item clearfix'>
                <div class="pull-left">Hakka Noodles </div>
                <div class="pull-right">
                  <div class="fetch">Price1</div>
                </div>
             </li>
             <li class='list-group-item clearfix'>
                <div class=""><b>Ingredients</b></div>
             </li>
             <li class='list-group-item list-group-item-info clearfix'>
                <div class="pull-left">Others</div>
             </li>
             <li class='list-group-item clearfix'>
                <div class="pull-left">Masala papad </div>
                <div class="pull-right">
                  <div class="fetch">Price2</div>
                </div>
             </li>
             <li class='list-group-item clearfix'>
                 <div class=""><b>Ingredients</b></div>
             </li>
          </ul>
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</div>

<小时/>

旧 这是代码片段:

<div class="row">
<div class="col-md-4 col-md-offset-4">
<!-- Button HTML (to Trigger Modal) -->
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        <div class="glyphicon glyphicon-plus"></div>
      </div>
    </div>
  </div>
</div>
<!-- square end -->


<!-- Modal HTML -->
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Select to display</h4>
      </div>
      <!-- modal-header end -->
      <div class="modal-body">

        <ul class="list-group">

          <li class='list-group-item list-group-item-info clearfix'>
            <div class="pull-left">Chinese</div>
          </li>
          <li class='list-group-item clearfix'>
            <div class="pull-left">Hakka Noodles </div>
            <div class="pull-right">
              <a href="Price.php?id">Price</a>
            </div>
          </li>
          <li class='list-group-item clearfix'>
            <div class=""><b>Ingredients</b></div>
          </li>

           <li class='list-group-item list-group-item-info clearfix'>
            <div class="pull-left">Others</div>
          </li>
          <li class='list-group-item clearfix'>
            <div class="pull-left">Masala papad </div>
            <div class="pull-right">
              <a href="Price.php?id">Price</a>
            </div>
          </li>
          <li class='list-group-item clearfix'>
           <div class=""><b>Ingredients</b></div>
          </li>

        </ul>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</div>

  </div>
</div>

jQuery 打开模式:

$(document).ready(function() {
  $(".square").click(function() {
    $("#myModal").modal('show');
   });
});

Answer 1

如果你使用 bootsrap 最好的方法是

<div class="square" data-toggle="modal" data-target="#myModal">

对于调用模态，结束像这样的模态标题

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

在这种情况下，你不需要编写任何jquery，它将“从盒子”工作