Question

当我点击输入时，它会在两个字段上显示div。我希望div只显示在所选输入上。

$('.example').focus(function() {
    $('div.tip').show();
    $(document).bind('focusin.tip click.tip',function(e) {
        if ($(e.target).closest('.tip, .example').length) return;
        $(document).unbind('.tip');
        $('div.tip').fadeOut('medium');
    });
});
$('div.tip').hide();

Answer 1

Jquery .next()或.closest在input和divs之间不起作用。所以你可能需要像下面这样的工作量

Fiddle link

$('.example').focus(function () {
    $('div.tip').hide();
    var i = 0;

    $('.example').each(function () {
        if ($(this).is(":focus")) {
            $($('.tip')[i]).show();
        }
        i++;
    })

    $(document).bind('focusin.tip click.tip', function (e) {
        if ($(e.target).closest('.tip, .example').length) return;
        $(document).unbind('.tip');
        $('div.tip').fadeOut('medium');
    });
});
$('div.tip').hide();

Answer 2

我会做this

之类的事情

正如您所看到的，我已经为您要显示的每个div添加了一个ID，该ID与您单击的输入相关，因此您可以更灵活地将元素放置在DOM中。

它还隐藏了与当前输入无关的所有div。

我还在p标签之外移动了div，以使HTML有效，如评论中所示。

$('.example').focusin(function() {
    $('.tip').hide();
    $('#tip-'+$(this).attr('id')).show();
});
$('div.tip').hide();

Answer 3

如果我们按照此jsfiddle

修复嵌套<div>

<div>
    <label for="example">Text:</label>
    <input class="example" name="example" type="text" maxlength="100" />
    <div class="tip">
        Some text...
    </div>
</div>

这应该有效：

$('.example').on('blur', function() {
    $('div.tip').fadeOut('medium');
});
$('.example').on('focus', function() {
    $(this).siblings('div.tip').show();
});
$('div.tip').hide();

关注焦点节目div的Jquery

3 个答案: