将数据集属性从锚标记一直传递到 bootstrap 模式按钮

Question

我有一个 <a> 标签可以切换 Bootstrap Modal 的 show/hide。

<a href="#" data-toggle="modal" data-foo=${FOO} data-target="#emailFoo"></a>

其中 emailFoo modal 看起来像

<div class="modal fade" id="emailFoo">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-footer">
                <button id="sendEmail">OK</button>
            </div>
        </div>
    </div>
</div>

我想在 #emailFoo

内的 #email 按钮被点击 event 时获取 FOO 的数据

如何从在#sendEmail 单击事件中打开模式的按钮获取 foo 的值？

$( "#sendEmail" ).click(function() {
    //Get foo here from Parent modal that button is inside
     
    //$('#emailFoo').dataset['foo']
});

作为解决方法，我可以在首次打开模式时获取 foo。我在想我可以在其他地方设置这个值，这样点击按钮就可以得到它。

即

    $('#emailFoo').on('show.bs.modal', function () {

        //This works! How can I do the same thing from the `sendEmail` click event above?
        const callerFromAnchorTag = $(e.relatedTarget);
        const foo = callerFromAnchorTag [0].dataset['foo'];
    });

Answer 1

您似乎想通过这种方式获取 foo 值：

$( "#sendEmail" ).click(function() {

     const btn = $(this);
     
     const modal_id = btn.parents('.modal').attr('id');

     let toggler = $('body').find('[data-target="#' + modal_id +'"]');

     console.log(toggler.attr('data-foo'));
});

更新：

新部分：

所以我们在一个页面中有多个切换器，你想检测切换器是模态的调用者吗？

实现这个的奇特方法（通过 js 对象）：

class Modal {
    constructor(selector) {
        this.$modal = $(selector);

        this.modal_id = this.$modal.attr('id');
        this.$toggler = null;

        this.init();
        this.events();
    }

    init() {
        const obj = this;
    }

    events() {
        const obj = this;

        $('[data-toggle="modal"]').on('click', function () {
            const $a_toggler = $(this);
            if ($a_toggler.attr('data-target') === '#' + obj.modal_id)
                obj.$toggler = $(this);
        });
    }

    get_toggler() {
        return this.$toggler;
    }
}

用法：

制作新模态对象（在您的代码开头）：

const my_modal = new Modal($('#emailFoo'));

返回切换器 jquery 对象（无论你想从哪里得到它）：

console.log(my_modal.get_toggler());

另一种简单的方法：

像这样在你的模式中隐藏输入：

<a href="#" data-toggle="modal" data-foo=${FOO} data-target="#emailFoo" data-toggler="toggler-1"></a>
<div class="modal fade" id="emailFoo">
    <input type="hidden" class="js-toggler__input" value="" hidden>
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-footer">
                <button id="sendEmail">OK</button>
            </div>
        </div>
    </div>
</div>

点击切换器后，保存其 id 或某些属性，例如 data-toggler="__toggler-number__"（我使用数据属性）：

$('[data-toggle="modal"]').on('click', function () {
    const toggler = $(this);
    const toggler_identifier = toggler.attr('data-toggler');
    let modal_id = toggler.attr('data-target');
    $(modal_id).find('.js-toggler__input').val(toggler_identifier);
});

因此您可以通过 jQuery:

获得切换器

let toggler_identifier = $("#sendEmail").parents('.modal').find('.js-toggler__input').val();
console.log($('[data-toggler="' + toggler_identifier + '"]'))

关心：

data-toggler 属性应该是唯一的

几点：

最好使用类而不是 select DOM 的数据属性，数据属性应该用于存储少量数据。

Answer 2

您可以试试这个，而不是将 foo 分配给按钮数据属性

$('#emailFoo').on('show.bs.modal', function () {
    const callerFromAnchorTag = $(e.relatedTarget);
    const foo = callerFromAnchorTag [0].dataset['foo'];
    $('#sendEmail').attr('data-foo', foo);
});

然后

$('#sendEmail').click(function(){
    const foo = $(this).data('foo');
});

Answer 3

阿里的回答有效，但你也可以试试这个：

在模态中添加一个隐藏字段：<input type="hidden" id="hidden-value">

点击模态切换，设置这个hidden-value的值：

 $('#open-modal').on('click', function(event) {
     $('#hidden-value').val($(this).data('foo'));
 });

单击确定按钮后，获取值（仅在此处记录）：

 $( "#sendEmail" ).on('click', function() {
     console.log($('#hidden-value').val());
 });

这是'set the value somewhere, then get it on click'中的一个回答。

将数据集属性从锚标记一直传递到 bootstrap 模式按钮

Pass dataset attribute from anchor tag all the way down to bootstrap modal button

html

javascript

jquery

modal-dialog

bootstrap-4