获取子元素并修改文本

Question

当使用JavaScript单击按钮时，我需要将span元素中的文本从[+]切换到[ - ]。如何通过当前的切换功能实现这一目标？

HTML

...
<ul>
  ...
  <li>
    <ul>
      <h3>header</h3>
      <a href="#">url-link</a>
      <p>description</p>
    <ul>
    <div class="department" style="display: none;">
      <ul class="placemark"> ... </ul>
      <ul class="contact"> ... </ul>
    </div>
    <button class="department-collapse" onclick="toggle(this)">
      <span>[+]</span> Contact Information
    </button>
  </li>
  ...
<ul>
...

的JavaScript

function toggle(self) {
  var n = self.parentNode.childNodes;

  for(var i = 0; i < n.length; i++) {
    if (n[i].className == 'department') {
      n[i].style.display = n[i].style.display == '' ? 'none' : '';
    }
  }
}

Answer 1

在你的函数中，验证你的span（JS代码）：

function toggle(self) {
    var n = self.parentNode.childNodes;

    for(var i = 0; i < n.length; i++) {
        if (n[i].className == 'department') {
            n[i].style.display = n[i].style.display == '' ? 'none' : '';
        }
    }

    var mySpan = self.childNodes[0];
    mySpan.innerHTML = mySpan.innerHTML == '[+]' ? '[-]' : '[+]';
}