Question

我一直在使用带有jquery计时器的usercontrol。起初我在usercontrol中有jquery。但是当我将2个控件添加到我的页面时，第二个用户控件并没有很好地显示它的数据。

现在我将jquery放入主页，usercontrol只使用jquery的id。

这是我的usercontrol：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
    Inherits="WebUserControl" %>
<style type="text/css">
    #mainpanel
    {
        width: 145px;
        height: 123px;
    }
</style>
<div id="mainpanel">
    <div>
        test</div>
    <div id="shortly" style="background-color: #FFFFFF">
    </div>
    <button id="resetButton">
        Reset
    </button>
</div>

网主页：

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>hoi</title>
        <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
        <link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
        <script type="text/javascript">


            $(document).ready(function () {

            $(function() {
            $("#mainpanel");
        });

                shortly = new Date();
                shortly.setSeconds(shortly.getSeconds() + 5.5);
                $('#shortly').countdown({ until: shortly,
                    onExpiry: liftOff, layout: '{sn}', 
                });
                $('#resetButton').click(function () {
                 $('#mainpanel').effect("highlight", {}, 700 );
                 $('#shortly').effect("highlight", {}, 700 );
                    shortly = new Date();
                    shortly.setSeconds(shortly.getSeconds() + 5.5);
                    $('#shortly').countdown('change', { until: shortly });

                });


                function liftOff() {
                    // refresh the page  
                    window.location = window.location;
                }


            });

        </script>
    </head>
    <body>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
<uc1:WebUserControl ID="WebUserControl2" runat="server" />

    </body>
    </html>

但我的用户控件仍然表现得很奇怪，现在我的问题是：“如何让SAME用户控件在一个页面上正常工作？”

这两个使用相同的jquery代码，但按钮等只能在usercontrol本身内工作。

Answer 1

正如David建议的那样，当您重复用户控件并且明确设置其id时，您将看到几个控件在页面上共享相同的id。我想$("#someid")将返回页面中的第一个元素，而不一定是你真正想要的元素。

David建议在用户控件的元素中添加CSS类（这与jQuery无关 - 尽管你编写的jQuery会引用它们）。

例如

<%@ Control Language="C#"  %>
<div class="mainpanel">
    <div>
        test
    </div>
    <div class="shortly">
        ??
    </div>
    <button class="resetButton">
        Reset
    </button>
</div>

[PS。请注意，您应该从用户控件中删除CSS，因为重复每次控件出现在页面上都是不好的做法，例如将其包含在您的主页面或单独的CSS文件中]

<style type="text/css">
    #mainpanel
    {
        width: 145px;
        height: 123px;
    }
    #shortly
    {
        background-color: #FFFFFF
    }
</style>

您的脚本可以是

$(function () { 
    // function that does something exciting?
    var liftOff = function() { 
        // .... 
    };

    // Get a date that is some (short) time in the future
    var getDeadline = function() {
        var shortly = new Date();
        shortly.setSeconds(shortly.getSeconds() + 5.5);
        return shortly;
    };

    // Attach click handler to all our buttons
    $("div.mainpanel button.resetButton").click(function(event){

        // I am assuming that you will not be nesting these controls?
        var $mainpanel = $(this).parents("div.mainpanel")   // this will find the mainpanel div that contains the pressed button
                .effect("highlight", {}, 700 );

        $("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
                .countdown('change', { until: getDeadline() });    
    });

    // Start all countdowns going on page load
    $('#shortly').countdown({ 
        until: getDeadline(),
        onExpiry: liftOff, 
        layout: '{sn}'
    });
});

Answer 2

您的用户控件在元素上使用id =“”。 Id在单个html页面中必须是唯一的。如果你需要附加css样式或者某些东西来通过jquery查询，你需要使用类而不是id，这样第二个控件就不会破坏id必须唯一的约定。

如何在同一页面上使用usercontrol的多个实例（使用jquery）

2 个答案: