带 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
});

注意：使用位置将要求您的desired_equity_help元素与输入元素属于同一父元素。如果不是这种情况，请考虑使用 offset 代替

Answer 2

这可能更接近您正在寻找的内容。您有一个未定义的变量，该元素可能应该是 shown 而不是 toggled。

$('input').each(function(index) {
    var $this = $(this);
    var position = $this.position();

    $this.focus(function() {
        $('#desired_equity_help').css({"left": position.left + 150,
                                       "top": position.top}).show();
    });
});

演示：http://jsfiddle.net/nEMye/

Answer 3

哦哦哦，看起来你在那里做了很多事情，根据你想要做的事情，你不需要那里的 each() 或 toggle() 方法。这是我要做的：

$(document).ready(function(){
    $('input').click(function(e){
        var position = $(this).position();
        $('#desired_equity_help')
        .css({"left" : position.left - 435 , 
            "top" : position.top -20 });    
    });
});

通过将 click 事件绑定到输入，您可以告诉它在每次单击输入时执行该函数。如果您不想要点击方法，可以将其更改为焦点方法或与您相关的任何方法。切换方法也是不必要的，它或多或少用于 switch 类型的按钮，单击一次，它会进入一种状态，然后再次单击它，它会返回到上一个状态状态或类似的东西。

希望这有帮助！