更改输入焦点上的div颜色

Aci*_*oud 3 javascript jquery focus

我想要的是改变div带字母的颜色s

<div class="search_container">
    <input type="text" class="search_field" placeholder="Search..." />
    <div id="magnify_glass">s</div>
</div>
Run Code Online (Sandbox Code Playgroud)

我试过的是这个

<script>
    $('.search_field').focus(function() {
        $('#magnify_glass').css('color','#ff0000');
    });
</script>
Run Code Online (Sandbox Code Playgroud)

Ror*_*san 5

假设您的代码位于<head>文档中,您只需要一个文档就绪处理程序.试试这个:

更新

要删除颜色,您还需要添加blur处理程序.

<script>
    $(function() {
        $('.search_field').focus(function() {
            $('#magnify_glass').css('color','#ff0000');
        }).blur(function() {
            $('#magnify_glass').css('color','transparent'); // or whatever the default is.
        });
    });
</script>
Run Code Online (Sandbox Code Playgroud)

此外,最好使用a class为元素添加样式,因为它更好地分离了关注点:

.focus { color: #F00; }
Run Code Online (Sandbox Code Playgroud)
$('.search_field').focus(function() {
    $('#magnify_glass').addClass('focus');
}).blur(function() {
    $('#magnify_glass').removeClass('focus');
});
Run Code Online (Sandbox Code Playgroud)