Question

我有输入为“ datapicker”的表格。...而且令人讨厌的是我没有看到输入错误，因为输入具有“只读”属性。

所以我有这段代码：

$('p.send-app-btn input[type="submit"]').on('click', function(){
$('input').each(function(){
if ( $(this).is('[readonly]') && $(this).prop('required') && !$(this).val()) {
    $(this).removeAttr('readonly');

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
  setTimeout(function () {
$(this).attr('readonly','readonly');
}, 1500);  
}
}
})
});

，并且效果很好，因为它从$(this)输入中删除了属性“只读”，并且显示输入错误。但是我希望在1.5秒后（错误消失后），重点输入将再次变为“只读”。

但是这部分代码不起作用，因为我无法抓住$(this)-我该怎么做？

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
      setTimeout(function () {
    $(this).attr('readonly','readonly');
    }, 1500);  
    }

我希望这很清楚。：）

Answer 1

您可以简单地将$(this)添加到变量中，或者如果浏览器支持 ES6 ，则只需使用箭头功能。另一个示例是您创建了一个将为您处理操作的函数。

示例1

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
    const input = $(this);
    setTimeout(function () {
      input.attr('readonly', true);
    }, 1500);  
}

示例2

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
    setTimeout(() => {
      $(this).attr('readonly', true);
    }, 1500);  
}

示例3

function disabeInput(element){
    element.attr('readonly', true);
}
if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
    setTimeout(() => {
      disabeInput($(this));
    }, 1500);  
}

Answer 2

您可以将this作为参数传递给setTimeout函数-

setTimeout(function(_this) {
  _this.attr('readonly','readonly');
}, 1500, $(this));

Answer 3

在@ Ulrich-dohou的帮助下，我找到了解决方案：

$('input').each(function(){
if ( $(this).is('[readonly]') && $(this).prop('required') && !$(this).val()) {
    $(this).removeAttr('readonly');
    setTimeout(() => {
$(this).attr('readonly','readonly');
},1500)
}
})

我的代码在按下“提交”按钮时就检查了$(this).is(':focus')。足够晚一点检查它（需要1s），并且效果很好。感谢您的回答！

在一定时间后使用$（this）元素进行处理

3 个答案: