点击元素动态显示/隐藏关联div失效问题求助

嘿，我来帮你揪出这个问题！从你给出的代码片段来看，目前只定义了要显示的div变量，但还没看到完整的点击事件绑定逻辑，不过这类问题通常逃不过几个常见的坑，你可以逐一检查：

• 触发元素的选择器写错了：先确认你给哪些元素绑定点击事件？比如周一的按钮/链接，你是不是用了$("#mon")但实际元素的ID是monday？可以打开浏览器控制台，输入console.log($("你的触发元素选择器"))，看看返回的集合长度是不是大于0——如果是0，说明选择器没找到元素，点击事件自然绑不上。

• 缺失点击事件的绑定逻辑：你定义了showMon这些变量，但有没有给触发元素绑定click事件？比如应该像这样写：

// 假设触发元素是#mon-btn
$("#mon-btn").click(function() {
  // 先把所有场次div都隐藏
  $(".showtimes").hide();
  // 再显示对应的div
  showMon.show();
});

要是没这段绑定代码，点击元素当然不会有任何反应啦！

• 初始隐藏方式不对：要显示的div是不是一开始用visibility: hidden或者opacity: 0隐藏的？jQuery的show()方法只会修改display属性，如果初始是其他隐藏方式，show()是不起作用的。你得确保目标div的初始样式是display: none（可以写在CSS里，或者用style="display: none"）。

• 变量作用域或拼写错误：比如你把showMon写成了showmon，或者点击事件的回调函数在另一个作用域里，拿不到你定义的这些变量。可以在回调里加个console.log(showMon)，看看能不能输出正确的DOM元素。

• 动态元素需要用事件委托：如果你的触发元素是页面加载后才通过JS生成的，直接用click()绑定事件是无效的，得用事件委托：

$(document).on("click", "#mon-btn", function() {
  $(".showtimes").hide();
  showMon.show();
});

给你一个完整的可运行示例参考：

HTML结构 #

<button id="mon-btn">周一场次</button>
<button id="tue-btn">周二场次</button>
<button id="wed-btn">周三场次</button>

<div id="monshowtimes" class="showtimes" style="display: none;">
  周一：10:00、14:30、19:00
</div>
<div id="tueshowtimes" class="showtimes" style="display: none;">
  周二：11:00、15:00、20:00
</div>
<div id="wedshowtimes" class="showtimes" style="display: none;">
  周三：09:30、16:00、18:30
</div>

JS代码 #

$(document).ready(function(){
  // 获取所有场次div
  var showMon = $("#monshowtimes");
  var showTue = $("#tueshowtimes");
  var showWed = $("#wedshowtimes");

  // 绑定每个按钮的点击事件
  $("#mon-btn").click(function() {
    $(".showtimes").hide();
    showMon.show();
  });

  $("#tue-btn").click(function() {
    $(".showtimes").hide();
    showTue.show();
  });

  $("#wed-btn").click(function() {
    $(".showtimes").hide();
    showWed.show();
  });
});

如果按照上面的检查还是没解决问题，建议你把完整的HTML和JS代码贴出来，这样能更快定位到具体问题哦！

内容的提问来源于stack exchange，提问作者jimmy118