Question

我一直在寻找类似的问题，但没有什么能与我想做的完全匹配。

基本上，我正在开发一个简单的chrome扩展程序，用于娱乐/自学脚本如何与chrome交互。我有一个简单的脚本工作，将显示/隐藏给定的div：

function showHide() {
    var e = document.getElementsByClassName("Line");

    for ( var i=0, len=e.length; i<len; ++i ){

        if(e[i].style.display == 'block')
            e[i].style.display = 'none';
        else
            e[i].style.display = 'block';
    }
}

正如您所期望的那样，它隐藏了页面上“Line”的每个实例。下一步是尝试仅隐藏包含特定字符串的div。我一直在玩'innerHTML.indexOf（“Line”），但到目前为止还没有任何效果。通常我收到此错误：未捕获的TypeError：无法读取未定义的属性'indexOf'

直观地说，我正试图做出以下几点：

if (e.innerHTML.indexOf("foo") != -1) { showHide(e); }

但我不确定如何将该条件与我工作的showHide（）函数集成。我认为我正在处理'if'语句，但是因为我对javascript很生疏，所以我主要是通过反复试验来处理。

只是在这里张贴，希望我能得到一些提示/方向。

Answer 1

您可以尝试迭代子节点并检查其内部Html。看看片段。

干杯！

＆＃13;

var showHide = function(e) {
  e.style.display = (e.style.display === 'block') ? 'none' : 'block'
}

function toggle() {
  doStuff();
}

function eContainsNodeValue(element, foo){
  
  var childs = element.childNodes;
  for (j = 0; j<childs.length; j++){
    if (childs[j].innerHTML === foo)
      return true;
  }
  return false;
}

function doStuff() {
  var elements = document.getElementsByClassName("Line");
  for (i = 0; i< elements.length; i++){
    if (eContainsNodeValue(elements[i], 'foo'))
      showHide(elements[i]);
  }
}

＆＃13;

#MyDiv {
  background-color: #6699ff;
}
.Line {
  display: block;
  background-color: #000000;
  color: #6699ff;
  width: 100%;
  text-align: center;
}

＆＃13;

<body id="MyDiv">
  <div class="Line" style="display: block">
    <h4>I'm a line 1!</h4>
  </div>
  <div class="Line" style="display: block">
    <h4>I'm a line 2!</h4>
  </div>
  <div class="Line" style="display: block">
    <h4>I'm a line 3!</h4>
  </div>
  <div class="Line" style="display: block">
    <h4>I'm a line 4!</h4>
    <p>foo</p>
  </div>
  <div class="Line" style="display: block">
    <h4>I'm a line 5!</h4>
    <p>bar</p>
  </div>
  <div class="Line" style="display: block">
    <h4>I'm a line 6!</h4>
  </div>
  <button onclick="toggle()">Toggle foo bar</button>
</body>

＆＃13;

如何根据div内容切换div的可见性

1 个答案: