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 に答える