2

ASP.NET には、単純な HTML として使用しているユーザー コントロールがいくつかあります。つまり、コード ビハインドはありません。

私は 1 つのコントロールに固定 ID の要素があり、いくつかの jQuery クライアント スクリプトでそれを指しています。例えば：

<div id="slider-section"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('#slider-section');
        // ... do something with the jQuery Object
    });
</script>

これは問題なく非常にうまく機能します。しかし、これには副作用があります。実際、ページに同じユーザー コントロールの 2 つのインスタンスを追加すると、同じ ID を持つ 2 つの要素が作成されます。

このような状況に対処するための良い方法はどれだと思いますか?

ありがとう

4

6 に答える 6

5

Asp.net コントローラーは、クライアント側でレンダリングされると、別の ID を作成します。例:

テキストボックスを定義します：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

ページのソース コードを確認すると、テキスト ボックス ID が次のようになっていることがわかります。

id="{GUID}_Textbox1"

したがって、セレクターを使用して、次のように ID の末尾を見つける必要があります。

<div id="slider-section"></div>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {      
            var slider = $('input[id$='TextBox1']').{youroptions};
            // ... do something with the jQuery Object
        });
    </script>

ここでドキュメントを確認してください：http://api.jquery.com/category/selectors/

楽しい ;）

于 2012-11-09T14:48:13.343 に答える
2

同一の ID が複数あることについてブラウザが文句を言うことはないかもしれませんが、それらを HTML ページに含めることは正しくありません。

実際の問題は、ユーザー コントロールを追加する ASP.NET コードを変更して、すべての ID が一意になるようにする必要があることです。そうすれば、jQuery の問題も解消されます。

于 2011-07-26T13:07:15.937 に答える
2

シンプルな HTML コントロールに追加runat="server"すると、他のすべてのサーバー コントロールと同様に、ページ固有の ClientID を持つことになります。分離コードは必要ありません。

例えば

<div id="slider-section" runat="server"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('#<%=slider-section.ClientID %>');
        // ... do something with the jQuery Object
    });
</script>
于 2011-07-26T13:03:50.980 に答える
1

あなたの質問を完全に理解しているかどうかはわかりませんが、あなたが求めていると思うことに基づいています。html 要素のクラスを使用するように jQuery セレクターを変更すると、問題は解決しますか? たぶん、このようなものがあなたのために働くでしょう：

<div id="slider-section1" class="slider-section"></div>
<div id="slider-section2" class="slider-section"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('.slider-section');
        // ... do something with the jQuery Object
    });
</script>

ps ブラウザーがサポートしている場合でも、同じ id/name の html 要素をページに配置することはお勧めできません。

于 2011-07-26T13:03:10.117 に答える
0

ID の要点は、要素を一意に識別することです。要素を「グループ化」したい場合は、それらに同じclass.

これはかなり良い説明です。http://css-tricks.com/818-the-difference-between-id-and-class/

于 2011-07-26T13:07:25.313 に答える
0

Read the clientID of the control in your markup and put it inside a JavaScript variable or directly into your jQuery function.

ie:

<div id="slider-section"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('#<%= yourControl.ClientID %>');
        // ... do something with the jQuery Object
    });
</script>
于 2011-07-26T12:59:03.390 に答える