Question

<div class="parent"> <input type="text" /> </div>

$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });

仅在输入字段具有值的情况下，我才尝试在div中添加一个类。我的意思是，如果我们在输入字段中输入文本，div会自动添加一个自类。唯一的问题是我们不能提供任何类名或ID 输入。

使用此脚本，我们可以在单击输入时添加类。但是我们需要做更多。

我们能做到吗？

Answer 1

您可以使用input代替focus。您还必须检查值以添加/删除类。请尝试以下方式：

$(document).ready(function(){
  $('.parent > *').focus();
  $('.parent > *')
    .on('input', function() {
      if($(this).val().trim() != '')
        $(this).parent().addClass('focused');
      else
        $(this).parent().removeClass('focused');
    });
});

.focused{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">Test <input type="text" /> </div>

Answer 2

使用您提供的html，它应该可以工作

$('.parent > *')
.focus(function() {
   if( $(this).val().length) $(this).parent().addClass('focused');
})
.blur(function() {
    if( $(this).val().length) $(this).parent().removeClass('focused');
});

OP评论后更新

<div class="some-div">Hello</div>
<div class="parent"> <input type="text" /> </div>

$('.parent > *')
.focus(function() {
    $(".some-div").addClass('focused');
})
.blur(function() {
    $('.some-div').removeClass('focused');
});

Answer 3

好的，只需使用.parent > input：

$('.parent > input')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });

Answer 4

在键盘输入，鼠标拖动，自动填充和复制粘贴上会触发input事件。

您可以尝试以下代码-

function toggleParentClass(elem) {
  console.log(elem.val());
  if (elem.val().length)
    elem.closest('.parent').addClass('focused');
  else
    elem.closest('.parent').removeClass('focused');
}

$('.parent').on('input', function() {
  toggleParentClass($(this).find('input'));
});

.focused {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <input type="text" />
</div>

Answer 5

如何在输入字段上放置事件侦听器。

如果输入框为空，请删除该类。否则，添加所需的类。

Closest帮助您找到具有给定选择标准的最接近成员。

对于集合中的每个元素，获取与通过测试元素本身并遍历其元素的选择器 DOM树中的祖先。

$('input').change(function(){
     if( $(this).val().trim() === '' ){//Empty input box
        $(this).closest('.parent').removeClass('focused');
     }
     else{
        $(this).closest('.parent').addClass('focused');
     }
  }
);

在父div中添加类

5 个答案: