2

我在 ASP.NET 中有一些用户控件，我将它们用作简单的 HTML，也就是说，没有任何代码隐藏。

我有一个控件，我有一个具有固定 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>

这很好用，没有任何问题。但是这样做有一个副作用。事实上，如果我在我的页面上添加相同用户控件的两个实例，我将拥有两个具有相同 ID 的元素。

在您看来，处理这种情况的好方法是什么？

谢谢

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

如果您添加runat="server"到您的简单 HTML 控件，那么它们将像所有其他服务器控件一样具有页面唯一的 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 回答
2

虽然浏览器可能不会抱怨多个相同的 ID，但将它们放在 HTML 页面上是不正确的。

您真正的问题是您需要更改添加用户控件的 ASP.NET 代码，以确保所有 ID 都是唯一的。那么你的 jQuery 问题也会消失！

于 2011-07-26T13:07:15.937 回答
1

我不确定我是否完全理解您的问题，但基于我认为您要问的内容；将 jQuery 选择器更改为使用 html 元素的类可以解决您的问题吗？也许这样的事情会为你工作：

<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 即使浏览器支持，页面上的 html 元素具有相同的 id/name 也不是一个好习惯。

于 2011-07-26T13:03:10.117 回答
0

阅读clientID标记中的控件并将其放入 JavaScript 变量中或直接放入 jQuery 函数中。

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 回答
0

ID 的全部意义在于唯一标识元素。如果你想将元素“组合”在一起，你应该给它们相同的class.

这是一个很好的解释。http://css-tricks.com/818-the-difference-between-id-and-class/

于 2011-07-26T13:07:25.313 回答