javascript - 获取模态调用者

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 。我不知道为什么模式不显示，它在本地工作。我想我在编写示例时犯了一些错误，也许 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 -->