Question

我有一个使用bootstrap 3生成的模态表单。它看起来没有可靠的方法来确定何时在屏幕上显示该表单。我正在尝试创建一个。我将两个事件附加到我的DOM元素，该元素在显示时以及何时被隐藏时发出信号。

jq_modal_login_form = $('#modal-login-form')[0]
jq_modal_login_form.on('shown.bs.modal', function () {
    jq_modal_login_form.active_onscreen = true;
});
jq_modal_login_form.on('hidden.bs.modal', function () {
    jq_modal_login_form.active_onscreen = false;
});

我尝试将名为active_onscreen的属性提供给上面的DOM元素。当我稍后查看调试器中的DOM元素时，该属性不存在。

我应该提一下，我对javascript非常新。属性甚至是正确的词在这里使用？看起来属性也有点用词不当。它可以是对象的属性，但也可以是object.attributes属性的属性，对吧？我认为后者是造型等等，并且不是我想要改变的地方。有没有人对我应该在这做什么有所了解？

Answer 1

在jQuery中：

$('selector').attr('attribute_name', 'value');

但是，您只能使用预定义属性，因为创建自定义属性需要在您的情况下不需要的其他设置（请参阅this question）。

在您的情况下，您可能只想在元素中添加active_onscreen类。类用于标识元素（而不仅仅用于CSS），因此它们非常适合此应用程序。您可以使用它将类添加到元素：

$('selector').addClass('active_onscreen').

当它不再处于活动状态时，您可以使用它来删除该类：

$('selector').removeClass('active_onscreen').

Answer 2

如果您只想查看给定的模态是否打开，Bootstrap会为您执行此操作。您可以查看bs.modal数据属性：

$("element").data('bs.modal').isShown;

或类（但这种方法容易出现竞争条件）：

$('#myModal').hasClass('in');

Answer 3

您在这里做的是添加DOM对象的属性 - 而不是元素的属性。

添加属性不一定会使属性镜像它。只有内置属性才能执行此操作。

如果要设置属性，而不是属性，可以使用jQuery的.attr()方法。

将属性添加到DOM元素

3 个答案: