0

最初は、すべてのスマート提案 div が非表示になっています。ユーザーがクリックした最も近い「prod-name-container」divに属する「smart-suggestions」divを表示しようとしています。closest() と 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();
    });
4

3 に答える 3

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');
    //  })

})
于 2012-12-05T15:26:17.260 に答える
1

これを行うだけです - .smart-suggestions は .prod-name の兄弟です

$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
    $last = $(this);
    $last.next('.smart-suggestions').show();
});
于 2012-12-05T15:26:56.503 に答える
0
$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
    $last = $(this);
    $('.invoice-line', $(this)).closest(".prod-name-container").find('.smart-suggestions').show();
});

クリックしたい場合は$('.prod-name').focus、.clickに変更します

于 2012-12-05T15:26:33.853 に答える