如何添加集中在结帐和产品评审表单上的类输入？
如何添加集中在结帐和产品评审表单上的类输入？
提问于 2019-09-10 09:03:55
如果一个输入是焦点或者有一个值，我想把一个类添加到所有输入的父.field目录中。例如，在产品页面审阅表单或结帐页面发货表单上。如果输入是焦点，我会添加一个“活动”类，如果输入有值，我会添加类“hasavalue”。
当我尝试使用jquery时，产品页面审查表单输入或结帐页面输入没有任何反应。
下面是我使用的jquery：
requirejs(['jquery'],function($){
$(document).ready(function(){
$('.field input').focus(function () {
$(this).parent().parent().addClass('active');
}).blur(function () {
$(this).parent().parent().removeClass('active');
});
$('.field input').blur(function(){
if ( $(this).val() ) {
$(this).parent().parent().addClass('hasavalue');
} else{
$(this).parent().parent().removeClass('hasavalue');
}
});
});
});我需要使用knockout吗？如果是这样，我如何将这个简单的jquery转换为使用Magento的所有输入？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-10 15:16:52
如果字段尚未加载，则需要委托事件处理程序。然而，‘焦点’和‘模糊’不会冒泡，所以你需要使用jQuery的.on('focusin')和.on('focusout') https://stackoverflow.com/a/14496244/6127393
$(document).ready(function() {
$('body').on('focusin', '.field input', function() {
$(this).closest('.field').addClass('active');
}).on('focusout', '.field input', function() {
let fieldDiv = $(this).closest('.field');
fieldDiv.removeClass('active');
// toggleClass eliminates need for if else, just put the test as second parameter, true adds class while false removes it
fieldDiv.toggleClass('hasavalue', ($(this).val() !== ''));
})
// adding a field afterwards just for demonstration to show it still works
$('<div class="field"><label>loaded after document ready</label><br><input></div>').appendTo('body')
});/* just example for visual verification */
.field {
padding: 1em;
border: 1px solid white;
background: orange;
}
.field.active {
border: 1px solid black;
}
.field.hasavalue {
background: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- structure does not matter as long as there is an input inside .field -->
<div class="field">
<input>
</div>
<div class="field">
<div>
<input>
</div>
</div>
<div class="field">
<div>
<div>
<div>
<input>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57862793
复制相关文章
相似问题
腾讯云开发者
