Question

我写了一个我以前使用过的基本切换功能，但是由于某种原因它不能完全正常工作。我之所以这么说是因为，当我在控制台上登录显示时，它说不显示任何内容，但该元素永不消失。我知道一个事实，该函数正在触发并且它检测到的元素显示为“”，但是将其设置为none（并且将其记录到控制台中证明了这一点），但是实际元素并未从屏幕上消失。 >

function filter_toggle(){
    var form = document.getElementById("filter_form");
    var display = form.style.display;
    console.log(display);
    if (display == ""){
        display = "none";
    }
    else if (display == "none"){
        display = "";
    }
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

Answer 1

已为变量ValueError: cross_val_predict only works for partitions分配了对象的display属性的值（它是字符串值），更改变量不会更改属性，相反，您可以使用{{ 1}}：

display

style

Answer 2

您的代码检查style.display属性，但仅在应设置display时才设置style.display。另外，在这种情况下，else if也不需要。您可以只使用else。而且，与display = ""相比，在display:none和display:block之间切换更为准确（用于隐藏/显示块级元素，例如div或display:inline用于隐藏/显示内嵌元素，例如span）。

function filter_toggle(){
    var style = document.getElementById("filter_form").style;
    console.log(style.display);
    if (style.display == "none"){
        style.display = "block";
    } else {
        style.display = "none";
    }
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D" style="display:none;">
                ...more elements...
                </div>
</div>

您还可以使用ternary operator使它更紧凑。

function filter_toggle(){
    var style = document.getElementById("filter_form").style;
    // This is a compact if/then/else
    style.display = style.display == "none" ? "block" : "none";
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

但是，您正在重新设计轮子并使用内联样式（由于它们引入的额外代码及其易碎性质，应尽可能避免这样做）。 .classList.toggle()函数为您完成此操作，并与更易于管理的CSS类一起使用：

let form = document.getElementById("filter_form");

function filter_toggle(){
  form.classList.toggle("hidden");
}

.hidden { display:none; }

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

JavaScript显示==“ none”实际未显示

2 个答案: