Question

最初隐藏所有智能建议div。我试图显示属于用户点击的最接近的'prod-name-container'div的'smart-suggestions'div。我尝试使用nearest（）和find（），但它不起作用，我不确定它为什么不起作用。

标记

              for($i=0; $i < 20; $i++){
                    echo '
                    <div class="invoice-line">
                        <div class="index">'.($i+1).'</div>
                        <div class="prod-id"><input type="text" id="prod-id"></div>
                        <div class="prod-name-container">
                           <input onKeyPress="search(this.value)" type="text" class="prod-name"/>
                           <div class="smart-suggestions">
                                <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
                           </div>
                        </div>
                        <div class="qty">1</div>
                    </div>';
                }

JQuery的

   $('.smart-suggestions').hide();
   $('.prod-name').focus(function() {
        $last = $(this);
        $('.invoice-line').closest(".prod-name-container").find('.smart-suggestions').show();
    });

Answer 1

您可以使用next方法。

$(function(){ // when the DOM is ready
    $('.smart-suggestions').hide();
    $('.prod-name').focus(function() {
        var $this = $(this);
        $this.next('.smart-suggestions').show();
    });

    //  or: 
    //  $('.prod-name').on('focus blur, 'function(e) {
    //       var $this = $(this);
    //       $this.next('.smart-suggestions').toggle(e.type === 'focus');
    //  })

})

Answer 2

这样做 - .smart-suggestions是.prod-name的兄弟姐妹

$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
    $last = $(this);
    $last.next('.smart-suggestions').show();
});

Answer 3

$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
    $last = $(this);
    $('.invoice-line', $(this)).closest(".prod-name-container").find('.smart-suggestions').show();
});

虽然如果您想点击它，我会将$('.prod-name').focus更改为.click

JQuery：使用最近和查找函数来显示隐藏的div

3 个答案: