jQuery技术咨询：列表元素类切换及Messenger式交互故障排查

嘿，我来帮你搞定这两个jQuery相关的问题！

要实现点击列表元素时给当前项加类，同时移除之前选中项的类，分两种场景给出写法：

• 静态列表（页面加载时就存在的元素）：直接绑定点击事件即可

$(document).ready(function() {
  // 假设列表项统一使用.list-item类
  $('.list-item').click(function() {
    // 先移除所有列表项的active类
    $('.list-item').removeClass('active');
    // 给当前点击的元素添加上active类
    $(this).addClass('active');
  });
});

• 动态列表（后续通过JS新增的元素）：用事件委托更靠谱，不然新添加的元素不会绑定事件

$(document).ready(function() {
  // 把事件绑定到父容器或document上，监听.list-item的点击
  $(document).on('click', '.list-item', function() {
    $('.list-item').removeClass('active');
    $(this).addClass('active');
  });
});

注：这里的active是自定义类名，记得在CSS里写好对应的样式哦~

看了你贴的代码，核心问题出在脚本加载顺序上，还有一点小逻辑可以优化：

问题根源 #

你把自定义的jQuery代码写在了引入jQuery库的脚本前面！浏览器是从上到下解析代码的，当执行$(document).ready()时，jQuery还没加载完成，$这个函数根本不存在，所以代码完全没起作用。

修复后的完整代码 #

<!-- 先引入jQuery库，确保它先加载完成 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#demo').click(function() {
    // 隐藏当前点击的"my name"元素
    $(this).hide();
    // 以slide动画显示详情元素
    $('#demo2').slideDown();
    
    // 如果需要切换效果（点击一次隐藏/显示，再点击反过来），就换成下面的代码：
    // $(this).toggle();
    // $('#demo2').toggle("slide");
  });
});
</script>

<div id="demo">my name</div>
<!-- 默认隐藏详情元素，不然打开页面就显示了 -->
<div id="demo2" style="display: none;">This is my details</div>

额外优化点 #

• 给#demo2加上默认隐藏的样式，这样打开页面时只有"my name"显示，符合需求；
• 如果是要点击后切换显示状态（不是一次性隐藏），就用toggle()方法替代hide()和slideDown()。

内容的提问来源于stack exchange，提问作者Saif Uddin Ripon