输入时没有添加班级时重点

Question

我有这个非常简单的点击事件，如果input已被集中，它应该添加一个类到所述input。

但是，它不想添加类。我一直确定包括jQuery库，但没有任何反应。

jQuery的：

$("body").on("click", function(){ 
    if($("input").is(":focus")){ 
     $(this).addClass("highlight-input"); 
    } else { 
     $(this).removeClass("highlight-input"); 
    } 
}); 

Answer 1

你需要用这样的方式：

$(document).ready(function() { 
    $("input").on("focus", function() { 
    $(this).addClass("highlight-input"); 
    }).on("blur", function() { 
    $(this).removeClass("highlight-input"); 
    }); 
}); 

Answer 2

在你的代码 - this表示body元素，所以当你使用$(this).addClass("highlight-input");你highlight-input类添加到body元素。

$("body").on("click", function(){ 
 
    if($("input").is(":focus")){ 
 
     debugger; 
 
     $(this).addClass("highlight-input"); 
 
    } else { 
 
     $(this).removeClass("highlight-input"); 
 
    } 
 
});

.highlight-input { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input />

这很可能是你在找什么：

$('input').on('focus', function() { 
 
    $(this).addClass("highlight-input"); 
 
}).on('blur', function() { 
 
    $(this).removeClass("highlight-input"); 
 
});

.highlight-input { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input />