jQuery: 如何在鼠标悬停时显示复选框值（没有标题属性）

Question

我是 jQuery 的新手，需要以下方面的帮助。

我有一个 HTML 页面，其中包含大量动态复选框，我想 在鼠标悬停时显示复选框的值，而无需添加标题 属性在他们每个人的代码中。

此外，复选框的值可以与她旁边显示的文本（标签）不同。复选框始终位于 div 和 class '.divCheck' 中，以上内容适用于这些 div 中的所有复选框（所有设置方式相同）。

到目前为止，我有以下内容可以按预期工作，但似乎非常慢（至少在我的测试环境中）。

是否有更快/更好的方法来实现此目的，或者可以将其写成不同的方式（jQuery 或 HTML）以使其运行更快？

我的HTML（简体）：

<div class="divCheck">
    <input type="checkbox" name="language" class="checkSingle" id="language1" value="de - German" />
        <label for="language1">de</label>
    <input type="checkbox" name="language" class="checkSingle" id="language2" value="en - English" />
        <label for="language2">en</label>
    <input type="checkbox" name="language" class="checkSingle" id="language3" value="es - Spanish" />
        <label for="language3">en</label>
    <!-- ... -->
</div>

我的jQuery:

$('div.divCheck label').on('mouseover', function(){
    var checkID = $(this).attr('for');
    var checkVal = $('#'+checkID).val();
    $(this).prop('title', checkVal);
});

非常感谢您的帮助，麦克

Answer 1

无需使用事件处理程序，您可以像

一样以编程方式设置标题

$('div.divCheck label').attr('title', function(){
    return $(this).prev('input').val()
});

$('div.divCheck label').attr('title', function() {
  return $(this).prev('input').val()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divCheck">
  <input type="checkbox" name="language" class="checkSingle" id="language1" value="de - German" />
  <label for="language1">de</label>
  <input type="checkbox" name="language" class="checkSingle" id="language2" value="en - English" />
  <label for="language2">en</label>
  <input type="checkbox" name="language" class="checkSingle" id="language3" value="es - Spanish" />
  <label for="language3">en</label>
</div>

Answer 2

qtip 等工具提示库可以帮助您

Answer 3

您可以将复选框的 title 属性设置为值。这样，您就不需要任何 library/plugin.

$(':checkbox').prop('title', function() {
    return $(this).val();
});

演示：https://jsfiddle.net/zstupsbc/

jQuery: 如何在鼠标悬停时显示复选框值（没有标题属性）

jQuery: How to show a checkbox value on mouseover (without title attribute)

javascript

jquery

mouseover

title