2

我使用 jQuery ui 位置插件在其先前元素旁边设置一些帮助框，如果我设置先前的框 id，它可以工作，但如果我尝试使其更具动态性，并且为此，我需要它是动态的。让我们看看代码：

CSS

.helpBox {
    width: 150px;
    height: 75px;
    position: absolute;        
    display: block;
    right: 0;
    bottom: 0;
    background-color: #bcd5e6;
    text-align: center;
}

HTML

<asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="required" ClientIDMode="Static"></asp:TextBox>
<div class="helpBox">This is a helping box.</div>

对不起 asp.net 代码，它只是一个文本框。

JS

$(".helpBox").position({
    of: $("#txtInformation"),
    my: "left center",
    at: "right center",
    offset: "10 0"
});

这行得通，但是如果我尝试使用它，以便我可以重用它并使其与它不支持的所有帮助框一起工作：

$(".helpBox").position({
    of: $(this).prev(),
    my: "left center",
    at: "right center",
    offset: "10 0"
});

现在我想知道如何使它工作。该属性应该处理它，但不知何故它不是。谁能告诉我我做错了什么？

谢谢。

4

1 回答 1

2

您正在将一个对象传递给该.position函数。对象在传递给函数之前被定义，因此$(this).prev()将在调用该方法的代码的上下文中进行评估。不一定this会在此处参考您的。.helpBox

但是，如果您使用 迭代您的帮助框$.each，那么this在每次迭代时都会引用实际的框：

$('.helpBox').each(function() {
   $(this).position({
     of: $(this).prev(),
     my: "left center",
     at: "right center",
     offset: "10 0"
   });
});

演示

于 2012-05-25T09:20:13.667 回答