类添加/删除行为的焦点输入和焦点输出'active'

Question

我有一个函数，当focusin添加类时，可以根据行为添加和删除"活动"类 焦点/单击某个"输入"类，当单击外部时应该删除它，但它没有这样做。

var inptxt = $('.form-component.input-text input')
$(inptxt').on('focusin', 
function(){
$(this).parent().addClass('active');
}).on('focusout', function(){
$(this).parent().removeClass('active');
});

感谢您的帮助！

Answer 1

你的代码是正确的。代码中只有一些语法错误

inptxt = $('.form-component.input-text input')  //  ;  end with semicolumn 
$(inptxt')        //replace with $(inptxt)  

var inptxt = $('.form-component.input-text input');
$(inptxt).on('focusin', 
function(){
$(this).parent().addClass('active');
}).on('focusout', function(){
$(this).parent().removeClass('active');
});

div.active {
background-color:rgb(128, 128, 128);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-component input-text">
<input type="text">
</div>

Answer 2

你的逻辑似乎工作正常。 您的问题中是否缺少确定问题的内容？

$('.form-component.input-text input').on('focus', 
function(){
$(this).parent().addClass('active');
}).on('focusout', function(){
$(this).parent().removeClass('active');
});

div.active {
background-color:rgb(128, 128, 128);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-component input-text">
<input type="text">
</div>