javascript - 带有 Jquery 的 Foreach 语句

Question

因此，每次用户单击输入元素时，我都会尝试重新定位元素。

<script>

$(document).ready(function(){                   
    $('input').each(function(index) {
             var p = $(this).attr('id');
             var position = p.position();   

             $this.focus(function(){    

             $('#desired_equity_help').css("left", position.left - 435 );
                 $('#desired_equity_help').css("top", position.top -20 );
             $('#desired_equity_help').toggle();                            
             });

    });
});

</script>

'desired_equity_help' 是我尝试根据单击的输入元素切换和重新定位的元素。知道为什么这不起作用吗？

这是 HTML:

<div id="desired_equity_help" class="form_tooltip" >
                        <div class="tooltip_inner" >            
                            <strong>Desired Equity</strong>
                            <p>Hello World! This is some dummy text.</p>
                        </div>
                    </div>

                    <span class="apply_form_label">Desired:</span><input  style="width:110px" type="text" id="desired_equity" name="desired_equity"/><br/>
                    <span class="apply_form_label">Break:</span><input style="width:110px" type="text" /> at: <input type="text" style="width:110px" /><select><option>Independent Users</option></select><br/>

                    <span class="apply_form_label">Last One:</span><textarea rows="3" cols="50"></textarea>
                </div>

Answer 1

忘记 foreach 并直接将事件应用到选择器，就像这样......

$('input').focus(function(){
   var p = $(this);
   var position = p.position();   
   $('#desired_equity_help').css("left", position.left - 435 );
   $('#desired_equity_help').css("top", position.top -20 );
   $('#desired_equity_help').show();                            
});

$('input').blur(function(){
    $('#desired_equity_help').hide();//hide on exit of input
});

注意:使用 position 将要求您的 desired_equity_help 元素与您的 input 元素属于同一父元素。如果不是这种情况，请考虑使用 offset相反