Question

我是jQuery的新手，需要一些帮助以下内容。

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

此外，复选框的值可能与她（标签）旁边显示的文本不同。复选框始终位于具有类'.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>

Answer 2

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

Answer 3

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

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

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

jQuery：如何在mouseover上显示复选框值（没有title属性）

3 个答案: