內聯樣式無時顯示div

Question

我有一個提交按鈕，它使用 Gravity Forms 有條件地顯示或隱藏按鈕。

顯示按鈕時，代碼如下所示： <button class="button gform_button" id="gform_submit_button_1" style="">

當按鈕未顯示時，代碼如下所示： <button class="button gform_button" id="gform_submit_button_1" style="display: none;">

因此，我想做的是在未顯示按鈕或具有內聯樣式display: none時顯示一個 div 。

我以為我可以做這樣的事情：

 function myFunction() { var x = document.getElementById('gform_submit_button_1'); if (x.style.display = 'none') { document.getElementById("div1").style.display = "block"; } else { document.getElementById("div1").style.display = "none"; } }

 <div id="div1">This is a hidden div that we can show with JavaScript</div>

這會在頁面加載時顯示div1 ，但當style=""時 div 不會隱藏。 當條件為真且style=""頁面不刷新時，這可能就是問題所在。 有沒有辦法調整一些東西，以便在不顯示style="" div1時？

謝謝，
喬什

Answer 1

if (x.style.display = 'none') 

這應該是：

if (x.style.display == 'none') 

否則， if語句將在所有情況下返回true ，並且x.style.display屬性將始終為'none' 。

在注釋部分， =用於賦值， ==用於值比較，而===用於類型和值比較。

而為此，

當條件為真且 style="" 頁面不刷新時，這可能就是問題所在。

你應該在某處調用 function 以便它可以在頁面加載后執行。

Answer 2

由於@Dream Bold 的答案編輯隊列已滿，這是我根據之前的答案對這個問題的回答。 基本上澄清

下面一行代碼：

if (x.style.display = 'none') 

應該改為：

if (x.style.display == 'none') 

主要區別在於使用的運算符 ( == )。 在第一種情況下，通過使用“ = ”， if語句將始終返回true ，並且x.style.display屬性將始終為'none' 。

在注釋部分， =用於賦值， ==用於值比較，而===用於類型和值比較。

要了解有關表達式和運算符的更多信息： 請查看此處

以及關於以下要求

當條件為真且 style="" 頁面不刷新時，這可能就是問題所在。

這里面的問題是代碼沒有執行。 您應該首先創建 function，然后通過添加事件偵聽器或設置將調用先前創建的 function 的action ，以便它可以在頁面加載后執行。

我的建議是在元素上使用window.onload + 另一個事件偵聽器/操作屬性

像這樣：

window.onload = function(){
var x = document.getElementById("gform_submit_button_1");
if(x.style.display == "none"){
alert("Display of x is none");
document.getElementById("div1").style.display = "block";
}
else{
alert("Display of x is not none");
document.getElementById("div1").style.display = "none";
x.style.display = "block";
}
}

Answer 3

或者，您也可以簡單地添加一個 Gravity Form HTML 字段，其中包含您的替代 div。 然后使用條件邏輯在隱藏提交按鈕時顯示它。