元素將不會顯示（）根據變量值，如果語句

我試圖做一個藍色的正方形顯示，如果fullScreenCropStatus = true和紅色正方形顯示，如果fullScreenCropStatus = false一旦'完成'按鈕被點擊。元素將不會顯示（）根據變量值，如果語句

該變量是正確的，並顯示正確的值，但藍色方塊不會顯示何時單擊「完成」。我嘗試了show()/hide()以及在css中設置顯示值的當前格式，但都沒有顯示藍色方塊。

紅色方塊成功hide()或display:none。我對此很困惑。

的代碼下面，這是JSbin

JS：

var fullScreenCrop = false; 
var fullScreenCropStatus = false; 
$('#cropping--modes').click(function() { 
    fullScreenCrop = !fullScreenCrop; 
    console.log("fullScreenCrop = " + fullScreenCrop); 
}); 
$("#done").click(function() { 
    fullScreenCropStatus = fullScreenCrop; 
    console.log("fullScreenCropStatus = " + fullScreenCropStatus); 
    if (fullScreenCropStatus === true) { 
     $(".done--title__container").css("display", "none"); 
     $(".done--title__container--fullscreen").css("display", "block"); 
    } else if (fullScreenCropStatus === false) { 
     $(".done--title__container").css("display", "block"); 
     $(".done--title__container--fullscreen").css("display", "none"); 
    } 
});

HTML：

<button id="cropping--modes">Toggle variable (true/false)</button> 
<button id="done">Done</button> 

<div class="done--title__container"> 
<div class="done--title__container--fullscreen">

CSS：

.done--title__container { display:none; width:50px; height:50px; background-color:red; position:relative; } 

.done--title__container--fullscreen { display:none;width:50px; height:50px; background-color:blue; position:relative; } 

#cropping--modes { display:block; width:200px; height:30px; } 

#done { display:block; width:200px; height:30px; }

來源

2017-06-20 GoldenGonaz

您的'div'標籤未關閉。一旦你關閉它就可以正常工作。 – mjw

您的div標籤「done - title__container」和「done - title__container - fullscreen」未關閉。一切工作正常，如果你修好了 –

好吧，我要退到一個黑洞並想知道爲什麼我沒有發現在2小時內嘗試。 – GoldenGonaz

關閉div標籤和你很好：

<button id="cropping--modes">Toggle variable (true/false)</button> 
<button id="done">Done</button> 

<div class="done--title__container"></div> 
<div class="done--title__container--fullscreen"></div>

來源

2017-06-20 15:16:24 mjw

哦，我的天哪，你在開我的玩笑！我怎麼對這種眼睛視而不見，謝謝你，我要去配鏡師。 – GoldenGonaz

許多原因之一，我們總是要求人們顯示所有代碼，包括標記！ – mjw

元素將不會顯示（）根據變量值，如果語句

回答

相關問題