javascript - jQuery:如何在鼠标悬停时显示复选框值(没有标题属性)

Question

我对 jQuery 还很陌生，需要以下方面的帮助。

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

此外，复选框的值可能与其旁边显示的文本(标签)不同。 复选框始终位于类 '.divCheck' 的 div 中，上述内容适用于这些 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>