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');
        }
    }
};

问题是如果变量尚未定义，则此代码无效。我在这里看到三个案例： - 当变量具有值=＆gt;它显示变量和值（正常情况）。 - 刚刚初始化变量时没有值=＆gt;它没有显示任何内容，而且它完全符合我的第三个案例。 - 当尚未创建变量时=>它显示以下行：＆＃34; test1： - ＆＃34;这是完全无用的......

那么，在这种情况下，如何仅使用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，class，name的html。

＆＃13;

$( "#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";
}

＆＃13;

#test{
 display: none;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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');
      }
	  } else {
	    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');
      }
	  }
  }
}

liArr = document.body.children[0].children;
for (var i=0;i<liArr.length;i++) {
  hide(liArr[i]);
}

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想将此作为对象：

＆＃13;

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');
        }
	  } else {
	    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');
        }
	  }
  }
}

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();

＆＃13;

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

＆＃13;

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

＆＃13;

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');
      }
   }
};

如何仅使用js代码（和css）隐藏元素？

3 个答案: