javascript - 元素不会根据变量值和 if 语句显示()

Question

如果fullScreenCropStatus = true，我正在尝试制作一个蓝色方 block 展示如果fullScreenCropStatus = false，红色方 block 显示单击“完成”按钮后。

变量是正确的并且显示了正确的值，但是当单击“完成”时蓝色方 block 不显示。我试过 show()/hide()以及当前在 css 中设置显示值的格式，但都不会出现蓝色方 block 。

红色方 block 成功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; }

Answer 1

关闭 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>