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

Posted 2023-05-08

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

【英文标题】：Is it possible to call a function on radio button hover and display the info returned in a tooltip using jQuery

【发布时间】：2021-09-28 18:26:55

【问题描述】：

我有一个需要在 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>

【问题讨论】：

您的 sn-p 存在一些语法问题。您在each() 处理程序上缺少)，并且contentXML 需要为ContentXML，因为JS 区分大小写。

修复了语法错误（缺少关闭悬停）以便 sn-ps 运行

谢谢。只是修复它:)。问题似乎仍然存在:(任何建议都非常感谢。

【参考方案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>