javascript - 单击时显示子 Div

Question

我的网页上有一个时间线，它根据数据库中找到的事件数量重新绘制。对于每个新事件，我都会克隆 box1 并重命名一些变量。

但是对于我的 onClick 函数，保存时间线信息的 div 永远不会显示。我认为问题可能在于我试图显示的 Id 被引号括起来，因此无法找到 div 元素 id。

关于如何解决此问题有什么想法吗？

function showBox(clickedID) {
        var num = clickedID.split(/(\d+)/);
        var cardId ="card" + num[1];
    
        if ($(cardId).css('display') != 'none'){
          $(cardId).show();
        }else{
          $(cardId).hide();
        }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="box1" onclick="showBox(this.id)">
      <div id="card1" style="display:none">
          <time id="ticketNumberBox1"></time> <p id="shortDescriptionBox1"></p><p id="startDateBox1"></p>
      </div>
    </li>

Answer 1

    var cardId ="card" + num[1];

应该是

    var cardId ="#card" + num[1];

除了使用 .show 和 .hide，您也可以使用 .toggle，但这取决于您。

<小时/>

正如 @connexo 指出的“OP 呈现的 HTML 无效，因为 li 没有 ul 或 ol 父级”，因此代码片段内部也发生了更改。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="box1" onclick="showBox(this.id)">k
  <div id="card1" style="display:none">asfadfsfd
      <time id="ticketNumberBox1"></time> <p id="shortDescriptionBox1"></p><p id="startDateBox1"></p>
  </div>
</li>
</ul>
<script type="text/javascript">
  function showBox(clickedID) {
    var num = clickedID.split(/(\d+)/);
    var cardId ="#card" + num[1];

    if ($(cardId).css('display') != 'none'){
      $(cardId).hide();
    }else{
      $(cardId).show();
    }
  }
</script>

注意我添加了随机字符，以便更容易查看/点击。