Question

我不知道如何向大家提出问题，但我会尽力解释。我的问题是我想显示我隐藏在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>

Answer 1

你html在div元素中有一个p，它不是值，所以使用div代替p作为容器，然后你需要显示下一个div.example编辑focus所以

的input

$('.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>

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

1 个答案: