jQuery实现单Div内单次单选文本并高亮的问题排查

嘿，我一眼就瞅出问题所在了——你在调用jQuery的removeClass()方法时多写了个多余的圆点！

错误原因解析 #

jQuery的removeClass()、addClass()这类操作类名的方法，接收的参数是纯类名字符串，不需要带CSS选择器里的.前缀。你原代码里的：

$("#"+divid).find('.highlight').removeClass('.highlight');

这里的.highlight是错误的写法，方法内部会把它当成完整的类名去匹配，自然找不到对应的元素来移除类，也就没法实现单选限制了。

修正后的完整代码 #

只需要把removeClass('.highlight')改成removeClass('highlight')就可以解决问题：

JavaScript

function check(val, divid){
  // 移除当前div内所有高亮元素的类名（去掉了多余的点）
  $("#"+divid).find('.highlight').removeClass('highlight');
  // 给点击的元素添加高亮样式
  $(val).addClass('highlight');
}

CSS

.highlight{ background-color : blue; }

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id ="1">
  <span id="a" onclick ="check(this,'1')">JAVA</span><br>
  <span id="b" onclick ="check(this,'1')">ASP</span><br>
  <span id="c" onclick ="check(this,'1')">C</span><br>
  <span id="d" onclick ="check(this,'1')">C++</span><br>
</div>
<br>
<div id ="2">
  <span id="e" onclick ="check(this,'2')">MATHS</span><br>
  <span id="f" onclick ="check(this,'2')">ENGLISH</span><br>
  <span id="g" onclick ="check(this,'2')">SOCIAL</span><br>
  <span id="h" onclick ="check(this,'2')">SCIENCE</span><br>
</div>

额外优化建议：用事件委托替代内联onclick #

内联事件绑定虽然直观，但不利于代码维护和扩展。推荐用jQuery的事件委托来重构代码，这样更优雅也更易维护：

优化后的JavaScript

$(document).ready(function() {
  // 给所有div下的span绑定点击事件
  $('div').on('click', 'span', function() {
    // 找到当前点击元素的父div，移除里面所有span的高亮类
    $(this).closest('div').find('.highlight').removeClass('highlight');
    // 给当前点击的span添加高亮类
    $(this).addClass('highlight');
  });
});

优化后的HTML（移除内联onclick）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="1">
  <span id="a">JAVA</span><br>
  <span id="b">ASP</span><br>
  <span id="c">C</span><br>
  <span id="d">C++</span><br>
</div>
<br>
<div id="2">
  <span id="e">MATHS</span><br>
  <span id="f">ENGLISH</span><br>
  <span id="g">SOCIAL</span><br>
  <span id="h">SCIENCE</span><br>
</div>

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