是否可以在单选按钮悬停时调用函数并使用 jQuery 显示在工具提示中返回的信息

Question

我有一个需要在 Chrome 和 Internet Explorer 11 上运行的跨浏览器应用程序，我正在尝试创建一个由单选按钮上的悬停事件触发的工具提示。

我想在工具提示中显示我的 XML 的标题和内容。

我试过以下没有运气:(。它似乎打破了单选按钮（允许选择两个单选按钮）

另外，由于我使用的是 append，它每次都会将值添加到悬停元素。有没有办法使用 jquery 或 css 打破这个和样式？

有人可以告诉我，我做错了什么或指出我正确的方向吗？。

如果有更好的方法可以在 chrome 和 internet explorer 11 上运行，我很乐意对我的方法进行更改。

提前致谢。

模态中的预期结果：

标题

价值1 价值2

价值1 价值2

...

$("input[name^='radioBtn']").hover(function () {
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)
var text= "Title";

$(".xmlContents").append(text);
      
$(node).find("ParentNode").children().each(function(){
var child1Val = $(node).find('Content > ParentNode > ChildrenNode > Child1').text();


var child2Val = $(node).find('Content > ParentNode > ChildrenNode > Child2').text();

$(".xmlContents").append(child1Val);
$(".xmlContents").append(child2Val);

});
});

.radioHover:hover ~ .xmlContents{
    visibility: visible;
  }

.xmlContents{
    visibility: hidden;
    background-color: white;
  border: 2px solid black;
    position: absolute;
    z-index: 1;
    border-radius: 6px;
    padding: 5px 0;
    width: 350px;
    /* border-spacing: 35px; */
    text-align: left;
  }

<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 radioHover" value="true" id="radioNo" class="radioBtn"/><br />
    <div class="xmlContents"></div>
    <span>No</span>
  </div>
</div>

Answer 1

回答你的问题，

是的，你会得到这种行为，因为你在每次悬停时都在追加，看看我的例子，我之前只是清空了“.xmlContents”。

为了不“破坏”它们需要具有相同名称属性的单选按钮！

$("input[name^='radioBtn']").hover(function () {
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)
var text= "Title";
// empty so it not stack up
$(".xmlContents").empty(); 
$(".xmlContents").append(text);
      
$(node).find("ParentNode").children().each(function(){
var child1Val = $(node).find('Content > ParentNode > ChildrenNode > Child1').text();


var child2Val = $(node).find('Content > ParentNode > ChildrenNode > Child2').text();

$(".xmlContents").append(child1Val);
$(".xmlContents").append(child2Val);

});
});

.radioHover:hover ~ .xmlContents{
    visibility: visible;
  }

.xmlContents{
    visibility: hidden;
    background-color: white;
  border: 2px solid black;
    position: absolute;
    z-index: 1;
    border-radius: 6px;
    padding: 5px 0;
    width: 350px;
    /* border-spacing: 35px; */
    text-align: left;
  }

<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>
    <!-- removed classname from name="" -->
    <input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn radioHover"/><br />
    <div class="xmlContents"></div>
    <span>No</span>
  </div>
</div>