在点击时显示子级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> 

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