Question

我有一个Twitter Bootstrap列表，其项目已标记以显示每个项目的数量。我想打开一个模态对话框来编辑这些金额。但由于它将是一个很长的动态列表，我不能为每个徽章编写一个函数，而是一个能够确定谁调用模态的唯一函数：

获取要在模态
当用户更改模态时存储新金额

HTML：

<div class="panel panel-primary">
    <div class="panel-heading">Shopping cart</div>
    <div class="panel-body">
        <ul id="cart-list" class="list-group">
            <li href="#" class="list-group-item" data-type="banana">Bananas
                <div class="pull-right"> <span id="badge" class="badge">5</span>

                </div>
            </li>
            <li href="#" class="list-group-item" data-type="pear">Pears
                <div class="pull-right"> <span id="badge" class="badge">2</span>

                </div>
            </li>
        </ul>
    </div>
</div>
<!-- Input-spinner modal dialog -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="input-group spinner">
                    <input type="text" class="form-control" value="42">
                    <div class="input-group-btn-vertical">
                        <button class="btn btn-default"><i class="fa fa-caret-up"></i>

                        </button>
                        <button class="btn btn-default"><i class="fa fa-caret-down"></i>

                        </button>
                    </div>
                </div>  <span class="help-block">Set the number of items</span>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS：

// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
    group: {
        name: "fruit_group",
        pull: true,
        put: true
    },
});

// Configure click action over the badges
jQuery(".badge").click(function() {
    console.log('Clicked badge, showing modal');
    $("#myModal").modal('show');
});

// Input-spinner function
(function ($) {
    $('.spinner .btn:first-of-type').on('click', function () {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
    });
    $('.spinner .btn:last-of-type').on('click', function () {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
    });
})(jQuery);

This is a jsfiddle with my attempt。我不知道为什么模态不会出现，它适用于localy。我想我写这个例子时犯了一些错误，或许jsfiddle只是不喜欢模态。无论如何，我认为它显示了我想要实现的目标。

任何帮助？

Answer 1

这样的事情？ http://jsfiddle.net/upjy4s5b/

使用jquery并使用类格式化html结构可以让您找到与其他事物相关的不同内容。通过jquery调用而不是内联调用来调用bootstrap模式，可以轻松传输所需的信息。

$(document).ready(function() {
    $('.edit').on('click', function() {

        var name = $(this).closest('.item').find('.name').html();
        var count = $(this).closest('.item').find('.count').html();
        $('#myModal').find('.modal-body').find('.itemName').html(name);
        $('#myModal').find('.modal-body').find('.itemCount').html(count);
        $('#myModal').modal('show');
    });
});

<ul class="list">
    <li class="item">
        <span class="name">Item 1</span>
        <span class="count">Count 1</span>
        <a href="#" class="edit">Edit</a>
    </li>
    <li class="item">
        <span class="name">Item 2</span>
        <span class="count">Count 2</span>
        <a href="#" class="edit">Edit</a>
    </li>
    <li class="item">
        <span class="name">Item 3</span>
        <span class="count">Count 3</span>
        <a href="#" class="edit">Edit</a>
    </li>
</ul>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          Name: <span class="itemName"></span>
          Count: <span class="itemCount"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

获取模态调用者

1 个答案: