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>

注意：我添加了随机字符，因此更易于查看/点击。

在点击时显示儿童Div

1 个答案: