如何僅使用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代碼？ （沒有額外的框架像角...）或者，如果你有另一種解決方案？

預先感謝您！

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，類名每個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>

Answer 2

function hide(x) { 
 
    if (x.getAttribute('class') == null) { 
 
    if (x.innerHTML == "") { 
 
     x.setAttribute('class', 'hide'); 
 
    } else { 
 
     x.setAttribute('class', 'show'); 
 
    } 
 
    } else { 
 
    if (x.innerHTML != "") { 
 
     var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("hide", ""); 
 
     x.setAttribute('class', newClass); 
 
     var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("show", ""); 
 
     x.setAttribute('class', newClass); 
 
     if (newClass == "") { 
 
     x.setAttribute('class', 'show'); 
 
     } else { 
 
     x.setAttribute('class', newClass+' show'); 
 
     } 
 
\t } else { 
 
\t  var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("hide", ""); 
 
     x.setAttribute('class', newClass); 
 
     var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("show", ""); 
 
     x.setAttribute('class', newClass); 
 
     if (newClass == "") { 
 
     x.setAttribute('class', 'hide'); 
 
     } else { 
 
     x.setAttribute('class', newClass+' hide'); 
 
     } 
 
\t } 
 
    } 
 
} 
 

 
liArr = document.body.children[0].children; 
 
for (var i=0;i<liArr.length;i++) { 
 
    hide(liArr[i]); 
 
}

.show { visibility:visible; } 
 
.hide { visibility:hidden; }

<ul> 
 
<li>Something</li> 
 
<li></li> 
 
<li>Something Else</li> 
 
</ul>

如果您要使用這個對象：

emptyFinder = function(htmlObj, key, val) { 
 
    this.htmlObj = htmlObj; 
 
    this.key = key; 
 
    this.val = val; 
 
} 
 

 
emptyFinder.prototype.hide = function(childObj) { 
 
    var x = childObj; 
 
    if (x.getAttribute('class') == null) { 
 
    if (x.innerHTML == this.val) { 
 
     x.setAttribute('class', 'hide'); 
 
    } else { 
 
     x.setAttribute('class', 'show'); 
 
    } 
 
    } else { 
 
    if (x.innerHTML != this.val) { 
 
     var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("hide", ""); 
 
     x.setAttribute('class', newClass); 
 
     var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("show", ""); 
 
     x.setAttribute('class', newClass); 
 
     if (newClass == "") { 
 
      x.setAttribute('class', 'show'); 
 
     } else { 
 
      x.setAttribute('class', newClass+' show'); 
 
     } 
 
\t } else { 
 
\t  var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("hide", ""); 
 
     x.setAttribute('class', newClass); 
 
     var origClass = x.getAttribute('class'); 
 
     newClass = origClass.replace("show", ""); 
 
     x.setAttribute('class', newClass); 
 
     if (newClass == "") { 
 
      x.setAttribute('class', 'hide'); 
 
     } else { 
 
      x.setAttribute('class', newClass+' hide'); 
 
     } 
 
\t } 
 
    } 
 
} 
 

 
emptyFinder.prototype.doHide = function() { 
 
    var xArr = this.htmlObj.children; 
 
    for (var i=0;i<xArr.length;i++) { 
 
    if(xArr[i].tagName.toLowerCase() == this.key.toLowerCase()) { 
 
     this.hide(xArr[i]); 
 
    } 
 
    } 
 
} 
 

 
ul = document.body.children[0]; 
 
ef1 = new emptyFinder(ul, "li", ""); 
 
ef1.doHide();

.show { visibility:visible; } 
 
.hide { visibility:hidden; }

<ul> 
 
    <li>Somthing</li> 
 
    <li></li> 
 
    <li></li> 
 
    <li>Another</li> 
 
    <li></li> 
 
    <li>Yet Another</li> 
 
    <div>Test 1</div> 
 
    <div></div> 
 
    <div>Test 2</div> 
 
</ul>

Answer 3

我失去了一些東西在這裏。只需檢查是否（val）。我只是改變了第二行僅

hideIfNull = function(parent, key, val){ 
    if (val) { 
     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'); 
     } 
    } 
};