Question

我正在创建一个出于学习原因的网站。现在我正试图在表格中实现课程概述。对于每门课程，我想给出一个描述，但仅限于观众需要它。因此，在开始它关闭，如果你点击一个+或它打开的东西（像一个扰流板）。这适用于多个表行。

现在看起来像这样：

HTML：

<tbody>
<tr>
    <td>Name</td>
    <td>Date</td>
    <td>Place</td>
    <td>Time</td>
    <td>$</td>
</tr>

<tr>
    <td>
        <div id="open" onclick="open('course1')">+</div>
    </td>
    <td colspan="4">
        <div id="course1" style="display:none;">
            Here is the text

            <div id="close" onclick="close('course1')"><br/>X</div>

        </div>

    </td>
</tr>
</tbody>

JS：

<script>
            function open(id) {
                document.getElementById(id).style.display='block';
                document.getElementById('open').style.display='none';
                document.getElementById('close').style.display='block';
            }
            function close(id) {
                document.getElementById(id).style.display='none';
                document.getElementById('open').style.display='block';
                document.getElementById('close').style.display='none'
            }
        </script>

CSS：

    #open {
    cursor: pointer;
    display: block;
    }

    #close {
        cursor: pointer;
    }

代码工作正常，如果我在JS部分告诉“getElementById”一个固定的id。但我希望多次这样做。但这不起作用。所以我想告诉JS总是需要的id。

有人知道，我怎么能为函数提供实际id？

我希望我提出正确的问题并以正确的方式提供。英语不是我的母亲，所以请原谅我的错误。

谢谢！

Answer 1

这是一个简单的例子。请注意，我已将要展开的div的q添加到链接中，以使用id属性将其打开：

data

Here's a fiddle to see it in action

Answer 2

您可以使用jQuery来显示和隐藏扰流板，如下所示：

＆＃13;

$(document).on('click', '.show', function() {
  // gets the next td element and shows the spoiler within it
  $(this).parent().next('td').find('.spoiler').show();
});

$(document).on('click', '.hide', function() {
  // hides the spoiler
  $(this).parent('.spoiler').hide();
});

＆＃13;

.show {
  cursor: pointer;
  color: blue;
}
.hide {
  cursor: pointer;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="spoilers">
  <thead>
    <tr>
      <td>Name</td>
      <td>Date</td>
      <td>Place</td>
      <td>Time</td>
      <td>$</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="show">+</span>
      </td>
      <td colspan="4">
        <span class="spoiler" style="display:none;">
            Spoiler 1<br/> <span class="hide">X</span>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="show">+</span>
      </td>
      <td colspan="4">
        <span class="spoiler" style="display:none;">
            Spoiler 2 <span class="hide">X</span>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="show">+</span>
      </td>
      <td colspan="4">
        <span class="spoiler" style="display:none;">
            Spoiler 3 <span class="hide">X</span>
        </span>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

这是一个无JQuery的答案。一般你做得好，在代码中做一些修改：

而不是＆＃34;打开＆＃34;，使用＆＃34; do_open＆＃34;，与＆＃34;关闭＆＃34;相同。
删除＆＃34;显示：阻止;＆＃34;来自css
使用class而不是id并使用DOM元素方法和属性，例如querySelector()和parentNode

＆＃13;

function do_open(opener) {
  opener.parentNode.parentNode.querySelector('.toggling-content').style.display = 'block';

}

function do_close(opener) {
  opener.parentNode.style.display = 'none';

}

＆＃13;

.opener {
  cursor: pointer;
}
.closer {
  cursor: pointer;
}

＆＃13;

<html>

<head></head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Name</td>
        <td>Date</td>
        <td>Place</td>
        <td>Time</td>
        <td>$</td>
      </tr>

      <tr>
        <td>
          <div class="opener" onclick="do_open(this)">+</div>
        </td>
        <td colspan="4">
          <div class='toggling-content' style="display:none;">
            Here is the text1

            <div class="closer" onclick="do_close(this)">
              <br/>X</div>

          </div>

        </td>
      </tr>
      <tr>
        <td>
          <div class="opener" onclick="do_open(this)">+</div>
        </td>
        <td colspan="4">
          <div class='toggling-content' style="display:none;">
            Here is the text1

            <div class="closer" onclick="do_close(this)">
              <br/>X</div>

          </div>

        </td>
      </tr>
    </tbody>

  </table>
</body>

</html>

＆＃13;

如何在html / JS中展开或关闭内容 - 始终分配给不同的ID

3 个答案: