Question

所以我需要为某些输入字段和textareas添加工具提示。目前，我的设置如下：

$(document).ready(function(){
    $('input').focus(function(){
       var p = $(this);
       var position = p.position();
       var input_name = $(this).attr('id');
       var name = '#'+input_name+'_help'; 
       $('#apply_tooltip').css("left", position.left - 310 );
       $('#apply_tooltip').css("top", position.top -15 );
       $(name).show();
       $('#apply_tooltip').show();


    });
    $('input').blur(function(){
        $('.tooltip_inner').hide();
        $('#apply_tooltip').hide(); 


    });


    $('textarea').focus(function(){
       var p = $(this);
       var position = p.position();
       var input_name = $(this).attr('id');
       var name = '#'+input_name+'_help'; 
       $('#apply_tooltip').css("left", position.left - 310 );
       $('#apply_tooltip').css("top", position.top -15 );
       $(name).show();
       $('#apply_tooltip').show();


    });
    $('textarea').blur(function(){
        $('.tooltip_inner').hide();
        $('#apply_tooltip').hide(); 


    });


});

这很有效，但显然可能有一个比简单复制函数更有效的解决方案......无论如何都要使用相同的函数来定位输入字段和textareas吗？

Answer 1

而不是：

$('input').focus(function(){

你可以使用它来获得具有相同jQuery对象的两种类型的对象，因此具有相同的功能：

$('input, textarea').focus(function(){

虽然这里不需要这样做，但你应该知道你也可以在一个函数中放入公共代码并从多个地方调用一个函数，而不是将代码复制到多个地方。基本上，您几乎不应将相同的代码块复制到多个位置。

Answer 2

另一种选择是重构。在这种特定情况下，jfriend00的答案是合适的，但是如果你需要传递任意参数，例如顶部或左侧位置，你总是可以提取一个方法。

function tt(p) {
   var position = p.position();
   var input_name = p.attr('id');
   var name = '#'+input_name+'_help'; 
   $('#apply_tooltip').css("left", position.left - 310 );
   $('#apply_tooltip').css("top", position.top -15 );
   $(name).show();
   $('#apply_tooltip').show();
}

$('input').focus(function() {
   tt($(this));
});

$('textarea').focus(function() {
   tt($(this));
});

Answer 3

我的方法是与CSS进行对齐（如果需要，使用position：absolute）并将工具提示设置为：

display: none;

然后在jquery中你只需要导航DOM并显示/隐藏（或者如果你想用它来表现性感，则淡入fadeIn fadeOut。）

$('input').focus(function(){
    $(this).siblings('.tip').show();
}).blur(function(){
    $(this).siblings('.tip').hide();
});

结合输入和textarea元素的js函数

3 个答案: