jQuery如何选中特定DOM元素 实现点击选择题选项显示对应解析

问题原因 #

• 选择器语法错误：$(this).closest("p" [Explanation])是无效的jQuery选择器写法，完全无法匹配元素
• 层级逻辑错误：.exp类的p元素是题目table的后续兄弟元素，不是按钮的祖先元素，使用用于查找祖先元素的closest()方法不可能匹配到目标解析元素

修复方案 #

将JS代码中最后一行的错误选择器部分替换为$(this).closest("table").nextAll(".exp").first().removeClass("novisibly")即可，完整修复后的代码如下：

var fatiguescore = 0
$(".exp").addClass("novisibly")

$('.q').on('click', function() {
  if ($(this).is(".correct")) {
    $(this).addClass("theright")
    ++fatiguescore
  } else {
    $(this).addClass("thewrong")
  }
  // 禁用当前题目所有选项
  $(this).closest("table").find(".q").attr('disabled', 'disabled')
  // 存储得分
  sessionStorage.setItem("fatigueScore", fatiguescore)
  // 找到当前题目对应的解析模块并显示
  $(this).closest("table").nextAll(".exp").first().removeClass("novisibly")
})

逻辑说明 #

• 先通过closest("table")定位到当前选项所属的题目表格
• 用nextAll(".exp")筛选出该表格后续所有类为exp的元素
• 用first()取匹配结果的第一项，就是当前题目对应的解析模块，移除隐藏类即可正常显示

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