如何用jQuery实现单选按钮hover触发tooltip展示XML内容，兼容Chrome和IE11

• 单选按钮失效问题：
  1. 第二个单选框的name属性配置错误，同组单选按钮必须保持name属性完全一致才能实现互斥选中，你误将样式类名写到了name属性中，写成了name="radioBtn radioHover"，导致两个单选框不属于同一组
  2. 第二个单选框没有添加radioHover类，无法触发你写的hover样式规则
• 内容重复追加问题：
  1. 你每次hover触发时都使用append方法添加内容，添加前没有清空容器原有内容，导致多次触发后内容累加
  2. 选择器选中了所有.xmlContents容器，没有只操作当前hover的单选框对应的目标容器
  3. XML遍历逻辑错误，每次循环都全局查找所有ChildrenNode下的节点，没有读取当前遍历到的节点内容，无法正确输出多组数据

修复后HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
  <div>
    <input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn radioHover" checked="checked"/><br />
    <div class="xmlContents"></div>
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="radioBtn" value="false" id="radioNo" class="radioBtn radioHover"/><br />
    <div class="xmlContents"></div>
    <span>No</span>
  </div>
</div>

修复后CSS代码 #

.radioHover:hover ~ .xmlContents{
    visibility: visible;
}
.xmlContents{
    visibility: hidden;
    background-color: white;
    border: 2px solid black;
    position: absolute;
    z-index: 1;
    border-radius: 6px;
    padding: 10px;
    width: 350px;
    text-align: left;
}
.xmlContents p {
    margin: 5px 0;
}

修复后JS代码 #

$("input[name='radioBtn']").hover(function () {
    // 获取当前hover单选框对应的tooltip容器，先清空原有内容
    var $tooltip = $(this).siblings(".xmlContents").empty();
    var contentXML = "<Content><ParentNode><ChildrenNode><Child1>true</Child1><Child2>Hello</Child2></ChildrenNode><ChildrenNode><Child1>false</Child1><Child2>Hi</Child2></ChildrenNode></ParentNode></Content>";
    var node = $.parseXML(contentXML);
    // 追加标题
    $tooltip.append("<div>Title</div>");
    // 遍历XML节点
    $(node).find("ParentNode").children("ChildrenNode").each(function(){
        // 读取当前遍历到的节点下的子元素值
        var child1Val = $(this).find("Child1").text();
        var child2Val = $(this).find("Child2").text();
        // 按期望格式追加段落
        $tooltip.append("<p>" + child1Val + " " + child2Val + "</p>");
    });
});

• 统一了同组单选框的name属性，补充了缺失的radioHover类，修复单选互斥失效问题
• 每次hover触发时先清空目标tooltip容器的内容，避免内容重复累加
• 只操作当前hover单选框对应的tooltip容器，不会影响其他单选框的悬浮层
• 修正了XML遍历逻辑，正确读取每个子节点的内容，按期望格式生成tooltip内容
• 基于jQuery 2.x实现，完全兼容IE11和主流Chrome版本

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