当我们关注jQuery时，只显示元素

Show only element when we have focused in jQuery

本文关键字：显示 元素 jQuery 我们      更新时间：2024-06-02

我不知道该如何提问，但我会尽力解释。我的问题是，我想显示我在CSS中隐藏的元素，在我的代码中有相同的类容器和结果类

我的期望是，当我专注于文本1时，它应该只显示文本1的结果，而文本2不会采取行动。

$('.examples').focus(function() {
    $('div.example').show();
    $(document).bind('focusin.example click.example',function(e) {
        if ($(e.target).closest('.example, .examples').length) return;
        $(document).unbind('.example');
        $('div.example').fadeOut('medium');
    });
});
$('div.example').hide();
.example{
 background: gray;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
    <div class="example">
        <p>reuslt</p>
    </div>
</p>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
    <div class="example">
        <p>result</p>
    </div>

您html在p元素中有一个div，它不是值，所以使用div而不是p作为容器，然后您需要显示focus和input的下一个div.example，因此

$('.examples').focus(function() {
    $(this).next('div.example').show();
    $(document).bind('focusin.example click.example',function(e) {
        if ($(e.target).closest('.example, .examples').length) return;
        $(document).unbind('.example');
        $('div.example').fadeOut('medium');
    });
});
$('div.example').hide();
.example{
 background: gray;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
    <div class="example">
        <p>reuslt</p>
    </div>
</div>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
    <div class="example">
        <p>result</p>
    </div>

相关文章：