如何在同一页面上使用usercontrol的多个实例（使用jquery）
问题描述：
我一直在处理一个带有jquery定时器的usercontrol。起初，我有用户控件内的jquery。但是当我将这两个控件添加到我的页面时，第二个用户控件没有很好地显示它的数据。如何在同一页面上使用usercontrol的多个实例（使用jquery）
现在我已经把jquery放到了主页面，usercontrol只使用了jquery的id。
这里是我的用户：
<%@ 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>
但是还是我的用户控件都怪怪的，现在我的问题是：“我怎么能做出同样的用户控件上的一个正常工作页？”
这两个都使用相同的jQuery代码，但按钮等只应该在用户控件本身内工作。
答
正如David所建议的，当您重复使用用户控件并且您正在明确设置它们的id时，您将最终得到几个控件，它们在页面上共享相同的id。我想$("#someid")会返回页面中的第一个元素，而不一定是你真正想要的元素。
David建议将CSS类添加到用户控件中的元素（这与jQuery无关 - 尽管您编写的jQuery将引用它们）。
例如
3210[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}'
});
});
答
您的用户控件在元素上使用id =“”。 Id在一个HTML页面中必须是唯一的。如果您需要附加css样式或通过jquery进行查询，您需要使用类而不是id，以便第二个控件不会违反id必须是唯一的约定。
+1提供详细示例的好工作。 – David 2010-05-21 14:55:53
谢谢你！真正appriciate这！ – Julian 2010-05-28 10:55:50