將屬性添加到DOM元素

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

但是，您只能使用預定義屬性，因為創建自定義屬性需要在您的情況下不需要的其他設置（請參閱此問題 ）。

在您的情況下，您可能只想在元素中添加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()方法。