Question

我一直在尝试将焦点功能添加到我的特定输入中，即想要在类上显示一个div作为：.search_by_name但它不起作用所以如果你有人请看看我的代码我做错了什么请？

以下是代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.search_by_business_name {
    background: #474747;
    display: none;
    width: 297px;
    margin-left: 179px;
    margin-top: 15px;
    height: 15px;
    position: absolute;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

.arrow-up_search_by_business_name {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #474747;
    position: relative;
    top: -8px;
    left: 20px;
}

.search_by_business_name_text {
    background: #99cc33;
    font-family: Arial;
    font-style: italic;
    color: #fff;
    padding: 7px;
    font-size: 14px;
    text-align: left;
    padding-left: 15px;
    margin-top: -4px;
}
</style>

<input type="text" class="search_input" id="search_by_business_name_input" placeholder="Hi Ruyben, what do you want to find today ?">

<div class="search_by_business_name"> 
<div class="arrow-up_search_by_business_name"></div><!-- end div arrow-up_search_by_business_name -->
<div class="search_by_business_name_text">Search by business name, or keyword</div><!-- end div search_by_business_name_text -->
</div><!-- end div search_by_business_name -->

<script>
$( "#search_by_business_name_input" ).focus(function() {
$( this ).next( ".search_by_business_name" ).css( "display", "block" );});
</script>

请查看实时版本：http://huntedhunter.com/waseem_jobs/pacific_site/index.html

Answer 1

该脚本应位于<body>标记内。在您的页面中，脚本位于</body></html>

之后

    <script>
        $( document ).ready(function() {
            $( "#search_by_business_name_input" )
                .focus(function() {
                    $( ".search_by_business_name" ).show();
                })
                .blur(function() {
                    $( ".search_by_business_name" ).hide();
                });
        });
    </script>
</body>
</html>

编辑：

当然它不起作用。您是否阅读过$.next()的文档？

的.next（）

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

替换它：

$( this ).next( ".search_by_business_name" ).css( "display", "block" );

使用：

$( ".search_by_business_name" ).css( "display", "block" );

EDIT2：

将代码包装在$ .ready中：

$( document ).ready(function() {
    $( "#search_by_business_name_input" )
        .focus(function() {
            $( ".search_by_business_name" ).show();
        })
        .blur(function() {
            $( ".search_by_business_name" ).hide();
        });
});

Answer 2

你应该把

<script>

    $( "#search_by_business_name_input" ).focus(function() {
      $( ".search_by_business_name" ).show();
    });

</script>

在body元素的底部，因为当执行此代码时，

$("#search_by_business_name_input" ) = []

或

你可以像这样写

$(document).on("focus", "#search_by_business_name_input", function(){
  $( ".search_by_business_name" ).show();
})

Answer 3

正如我在评论中所解释的那样，你不应该使用.next()作为你正在寻找的元素不是目标元素的下一个兄弟。

同样.focus()只需要一个函数作为参数，你需要使用.blur()来隐藏元素

$("#search_by_business_name_input").focus(function () {
    $(".search_by_business_name").show();
}).blur(function () {
    $(".search_by_business_name").hide();
});

jQuery焦点不起作用？

3 个答案:

编辑：

的.next（）

EDIT2：