javascript - 单击另一行时使一个表行消失

Question

我实际上想做几件事，但我找不到任何类似的 javascript 而不是 jQuery。
Updated fiddle with working code .感谢 LuudJacobs。
我知道，这很愚蠢..这只是为了练习，我是新手。也未完待续。
所以，我想做的是:
- 如果“Primo Victoria”行打开，请在单击/打开“Attero Dominatus”或任何其他行时将其关闭。但是 Show lyrics 应该允许用户打开任意数量的实例。
- 使“显示歌词”文本在点击时变成“隐藏歌词”。
我实际上几乎得到了这个，但我没有更改文本，而是创建了一个新链接...

document.getElementsByClassName("lyrics")[0].onclick = function () {
  var x = document.getElementsByClassName("showLyrics")[0];
  var y = document.getElementsByClassName("lyrics")[0];
    if (x.style.display === "none" || x.style.display === "") {
      x.style.display = "table-row";
      y.innerHTML = '<a href="#" class="lyrics">Hide Lyrics</a>';
    }
    else {
      x.style.display = "none";
      y.innerHTML = '<a href="#" class="lyrics">Show Lyrics</a>'
    }

感谢您的帮助。

Answer 1

与其直接更改表格行的样式，不如使用类并切换它们。这样更容易定位“扩展的”表格行。您的代码可能如下所示:

/* CSS */
.showLyrics{
  display: none; /* hide table row by default */
}
.showLyrics.visible{
  display: table-row; /* show the table row */
}

现在您可以使用 Javascript 在类之间切换:

//Javascript
document.getElementsByClassName("lyrics")[0].onclick = function(){
  var x = document.getElementsByClassName("showLyrics")[0];

  //check if the row already has a .visible class
  if(x.classList.contains('visible')){

    //hide the row if it's already visible
    x.classList.remove('visible');

    /* other stuff you want to do on hiding a table row */

  }else{

    //hide all rows which are visible (have class .visible)
    var visibleRows = document.querySelectorAll('.visible'),
        i, l = visibleRows.length;

    for(i = 0; i < l; ++i){
      visibleRows[i].classList.remove('visible');
    }

    //show the row
    x.classList.add('visible');

    /* other stuff you want to do on showing a table row */

  }
}

或者您可以使用 x.classList.toggle('visible');继续阅读 .classList在 MDN .

作为旁注:当我查看您的 fiddle 时，我注意到了这个:<tr class="tableEntry1, hover"> .我很确定你的意思是<tr class="tableEntry1 hover"> .注意:没有逗号。类应该用空格而不是逗号分隔。