將屬性添加到DOM元素

我有一個使用引導程序3生成的模式窗體。它看起來不像是有一種可靠的方式來確定何時該窗體顯示在屏幕上。我正在嘗試創建一個。我將兩個事件附加到了我的DOM元素，這些元素顯示了它何時顯示以及何時隱藏。將屬性添加到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; 
});

我試圖給上面的DOM元素一個名爲active_onscreen的屬性。當我稍後查看調試器中的DOM元素時，該屬性不存在。

我應該提到，我是非常新的JavaScript。是屬性甚至在這裏使用正確的詞？看起來屬性也有點不恰當。它可能是對象的屬性，但也可能是object.attributes屬性的屬性，對吧？我認爲後者是造型等的地方，並不是我想改變的地方。有人對我在這裏應該做什麼有一些瞭解嗎？

來源

2014-03-26 Nick

在jQuery中：

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

但是，您可以只應作爲創建自定義屬性，需要額外的設置（見this question）這是沒有必要在你的情況使用預定義的屬性。

就你而言，你可能只想添加一個active_onscreen類到元素。類用於識別元素（而不僅僅是CSS），所以它們非常適合這種應用。您可以使用它來添加一個類元素：

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

當它不再有效時，您可以使用它來刪除類：

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

來源

2014-03-26 21:19:12 zsaat14

我在研究期間早些時候看到了這一點，但我需要的不止於此。我試圖在這裏學習，而不是用勺子餵食的答案。爲什麼這是有效的，但我做的不是？ – Nick

@ user1556487看我的編輯。基本上，創建自定義屬性不是必需的，也不像您想象的那麼容易。 – zsaat14

好吧，這聽起來有效。我要讀更多關於類 – Nick

如果你只是想看看是否給定模態是開放的，Bootstrap爲你做。您可以檢查bs.modal數據屬性：

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

或類（但這種方法容易出現競爭情況）：

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

來源

2014-03-26 21:20:10 SomeKittens

我已經讀過，第一選擇是不可靠的其他地方，並會創造競爭條件。至於第二種選擇，我的模態形式沒有數據屬性，所以我一直得到一個未定義的錯誤。思考？ – Nick

@ user1556487更新了我的答案。不知道爲什麼你沒有數據屬性。 – SomeKittens

我曾看過其他地方發佈過的相同內容...我不認爲這是正確的。它不在任何地方的引導文檔中 – Nick

什麼，你在這裏做的是增加了DOM的財產對象 - 不是元素的屬性。

添加屬性不一定會使屬性鏡像它。只有內置屬性才能做到這一點。

如果你想設置的屬性，但不是屬性，可以使用jQuery的.attr()方法。

來源

2014-03-26 21:21:52 Scimonster

你是對的。我用錯誤的詞選擇。但是添加和檢查DOM對象的屬性有什麼問題？爲什麼這不起作用？ – Nick

它本身沒有錯。您無法將其作爲元素的屬性進行訪問。 – Scimonster

將屬性添加到DOM元素

回答

相關問題