Question

没有jQuery 我想循环使用相同类的未知数量的表行，并添加一个单击事件，该事件将更改隐藏的表行的类，该行正好在我单击的那一行之后。我设法做的就是点击打开所有隐藏的行..

这是我当前进步的小提琴：jsfiddle.net

我的js代码，显然不起作用......

var x = document.querySelectorAll('.table');
var y = document.querySelectorAll(".content");

for (var i = 0; i < x.length; i++) {
  x[i].addEventListener('click', function(event) {
    for (var j = 0; j < y.length; j++) {
      if (i === j) {
        y[j].style.display = "block";
      }
    }
  });
}

编辑：
我也看到在循环中创建函数是不好的。非常感谢对此的一些反馈......

Answer 1

尝试使用nextElementSibling功能

<强> Demo fiddle

＆＃13;

var x = document.querySelectorAll('.table');

for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('click', function(event) {
       this.nextElementSibling.style.display='block';
    });
}

＆＃13;

table tr td {
  border: 2px solid #000;
}

table {
  width: 500px;
  height: 40px;
}

.content {
  display: none;
  width: 100px;
}

.table:hover {
  background-color: red;
}

.content.visible {
  display: table-cell;
}

＆＃13;

    <table>
      <thead>
        <tr>
          <th>Tabela</th>
        </tr>
      </thead>

      <tbody>
        <tr class="table">
          <td>Visible</td>
        </tr>
        <tr class="content">
          <td>Hidden 1</td>
        </tr>
        <tr class="table">
          <td>Visible</td>
        </tr>
        <tr class="content">
          <td>Hidden 2</td>
        </tr>
        <tr class="table">
          <td>Visible</td>
        </tr>
        <tr class="content">
          <td>Hidden 3</td>
        </tr>
        <tr class="table">
          <td>Visible</td>
        </tr>
        <tr class="content">
          <td>Hidden 4</td>
        </tr>
      </tbody>
    </table>

＆＃13;

或如果您需要 toggle effect （重新点击隐藏），请使用此js代码

var x = document.querySelectorAll('.table');

for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('click', function(event) {
    var a = this.nextElementSibling.style.display;
        this.nextElementSibling.style.display = (a == 'block') ? 'none': 'block';

    });
}

JavaScript，迭代类，然后单击显示隐藏的tr

1 个答案: