javascript - 如何仅使用 js 代码(和 css)隐藏元素？

Question

在现有代码中，我有一个 html 页面，其中包含一些存在于某些 java 类中的变量。我想做的是如果没有定义(根本没有值)则隐藏一些变量并像正常方式一样显示其他变量。

这是部分html代码:

<li id="variable1" class="hide-me-if-blank">
<span class="title-libelle">test1 : </span>
<span class="value-libelle"></span>
</li>
<li id="variable2">
<span class="title-libelle">Description: </span>
<span class="value-libelle"></span>
</li>

因此，如您所见，这里的关键是他们创建了自己的 css 类来隐藏或显示元素。这是管理它的函数(在 .js 文件中):

/**
*
*   Hide a field if it's null
*
*/
hideIfNull = function(parent, key, val){
    if (undefined != val && !(val instanceof Object )
            && (null == val || 'null' == val || '' == val || !val.trim())) {
        var obj = parent.find("li#" + key);
        var hide = obj.hasClass("hide-me-if-blanc");
        if (hide) {
            obj.addClass('hide');
        }
    } else {
        var obj = parent.find("li#" + key);
        var hide = obj.hasClass("hide-me-if-blanc");
        if (hide) {
            obj.removeClass('hide');
        }
    }
};

问题是，如果变量尚未定义，则此代码无法运行。我在这里看到了三种情况:- 当变量有值时 => 它显示变量和值(正常情况)。- 当变量刚刚初始化时没有值 => 它不显示任何内容，这正是我想要的第三种情况。- 当变量尚未创建时 => 它显示行:“test1 : - ”，这是完全无用的......

那么，在这种情况下，您如何仅使用 js 代码来帮助我隐藏变量？ (没有像 angular 这样的额外框架......)或者如果你有其他解决方案？

提前致谢!

Answer 1

你可以使用 jquery:

$("#test1").css("display", "none");
$("#test").css("display", "block");

你可以使用Javascript

document.getElementById("test").style.display = "none";
document.getElementById("test1").style.display = "block";

这适用于每个使用 id、class、name 的 html。

$( "#test1" ).click(function() {
  $("#test1").css("display", "none");
  $("#test").css("display", "block");
});
document.getElementById("test").addEventListener("click", displaytest1);
function displaytest1(){
 document.getElementById("test").style.display = "none";
 document.getElementById("test1").style.display = "block";
}

#test{
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="test">
Press on me test
</div>
<div id ="test1">
Press on me test1
</div>