获取模式调用方

Get modal caller

本文关键字：调用 模式 获取      更新时间：2023-09-26

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

  • 获取要在模式中显示的呼叫者徽章的实际数量
  • 在用户更改模态时存储新金额

.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);

这是我的尝试。我不知道为什么模态没有出现，它在局部工作。我想我在写这个例子时犯了一些错误，哦，也许 jsfiddle 只是不喜欢模态。无论如何，我认为它显示了我想要实现的目标。

有什么帮助吗？

这样的东西？ http://jsfiddle.net/upjy4s5b/

使用 jQuery

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

$(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 -->
相关文章：