Question

我正在尝试制作一个项目编辑器。

例如：我有一个产品，我想删除它的序列号。（它都存储在数据库中）

所以我按下产品名称旁边的“借来的”图标：

<a href="#RemoveSerialNumberModal" data-toggle="modal"><i class="icon-minus"></i></a>

这将打开一个名为“RemoveSerialNumberModal”的模式，其中包含“您确定”按钮。

这样可以正常工作，但是有多个产品在彼此之下，我如何告诉模式需要哪个产品来删除序列号？（所有产品都有自己的图标）。

它的代码模式与产品列表位于同一文件中。但不是在同一个foreach循环中。

我更喜欢不使用JS，但如果没有别的办法。它必须这样做。

--------------- EDIT ---------------

产品确实有自己的id课程。

--------------- EDIT ---------------

这是模式：

<!-- Modal -->
    <div id="RemoveSerialNumberModal" class="modal hide fade">
        <div class="modal-header">
            <a href="#" data-dismiss="modal" class="close">&times;</a>
            <h3>Update serienummers</h3>
        </div>
        <div class="modal-body">
            <p>Selecteer het serienummer dat je wilt verwijderen.</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Sluiten</button>
            <button id="RemoveSerialNumber" class="btn btn-danger eerste" type="submit">Verwijderen</button>
        </div>
    </div>

Answer 1

在点击：

时使用数据属性和类名toogle

<a class="click" href="#RemoveSerialNumberModal" data="2121" data-toggle="modal"><i class="icon-minus"></i></a>

$('.click').click(function(){
   $('.click').removeClass('clicked');
   $(this).addClass('clicked');
});

$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) { // triggered when showing the modal
    var data = $('.clicked').attr('data');
});

Answer 2

使用data-id属性。

我猜你的模态中有以下html：

<input type="text" name="yourid" id="yourid" value=""/>

//triggered when modal is about to be shown
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) {

    //get data-id attribute of the clicked element
    var yourid = $(e.relatedTarget).data('id');

    //populate the textbox
    $(e.currentTarget).find('input[name="yourid"]').val(yourid);
});

如何将带有href id的值发送到模态

2 个答案: