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

How to unfold or close content in html/JS - always assigned to different id

本文关键字：分配 id html JS      更新时间：2023-09-26

出于学习原因，我正在创建一个网站。现在，我正在尝试在表格中实现课程概述。对于每门课程，我都想给出一个描述，但前提是观众想要它。所以一开始它关闭了，如果你点击一个+或其他东西，它会打开（就像剧透一样）。这适用于多个表行。

现在看起来像这样：

.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？

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

谢谢！

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

<table>
  <tr>
      <td>
          <div id="open" class="opener" data-toopen="course1">course 1 +</div>
      </td>
      <td colspan="4">
          <div id="course1" style="display: none">
              Here is the text
              <div class="close"><br/>X</div>
          </div>
      </td>
  </tr>
</table>
$(function(){
    $('.opener').click(function(){
    var divToOpen = $(this).data('toopen'); / get the id */
    $('#' + divToOpen).slideToggle(); /* this toggles it up and down so close not needed */
  });
  $('.close').click(function(){ /* but if you want close button that's ok too */
    $(this).parent().slideUp(); /* slide it back up */
  })
})

这是一个小提琴，看看它的实际效果

你可以使用 jQuery 像这样显示和隐藏剧透：

$(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();
});
.show {
  cursor: pointer;
  color: blue;
}
.hide {
  cursor: pointer;
  color: red;
}
<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>

这是一个没有 JQuery 的答案。一般来说你做得很好，在代码中进行一些修改：

    使用"do_open"代替
  1. "打开"，与"关闭"相同。
  2. 从CSS中删除"显示：阻止;"
  3. 使用 class 而不是 id，并使用 DOM 元素方法和属性，如 querySelector（） 和 parentNode

function do_open(opener) {
  opener.parentNode.parentNode.querySelector('.toggling-content').style.display = 'block';
}
function do_close(opener) {
  opener.parentNode.style.display = 'none';
}
.opener {
  cursor: pointer;
}
.closer {
  cursor: pointer;
}
<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>

相关文章：