Question

我有这个代码，但不是为什么它不起作用。

我有一个显示一些文字的输入。我想要在满足以下条件之一时显示此文本：

有多个角色
输入是焦点。

目前只有第一点有效，我做错了什么？

以下是codepen演示的link和下面的实际代码

HTML

<label for="password">Password</label>
<input type="password" id="password">
<span class="show">SHOW</span>

CSS

.show {
   font-size: 14px;
   display: none;
   transition: all 0.2s ease;
}

的jQuery

$('input').on('input', function(){
            if ($(this).val().length > 0), ($(this).is(":focus")) {
                $(this).siblings('.show').fadeIn();
            } else {
                  $(this).siblings('.show').fadeOut();
            }
        });

Answer 1

首先，请注意您的if语句未使用有效的JS语法。您需要在语句之间包含逻辑运算符;它们不是单独的论点。

要实现您的要求，您应该将事件分为两部分，input以检查值的长度，并focus知道input何时正在使用中。

另请注意，您应该从CSS中删除transition规则，因为它会干扰jQuery动画。试试这个：

$('input').on('input', function() {
  $(this).siblings('.show')[$(this).val().length > 0 ? 'fadeIn' : 'fadeOut']();
});

$('input').on('focus', function() {
  $(this).siblings('.show').fadeIn();
});

.show {
  font-size: 14px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="password">Password</label>
<input type="password" id="password">
<span class="show">SHOW</span>

jQuery if语句 - 多个字符或焦点

1 个答案: