mohammad973
شنبه 19 اسفند 1391, 09:17 صبح
ببینید دوست من ، این کد Repeater من هست :
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div style="margin: 15px auto; width: 96%; border: 2px solid white; display: block; background-color: white;">
<div id="QusetionHeader" style="margin: 0; height: 28px; width: 100%; background-color: gray; display: block; cursor:pointer">
<div style="margin: 0 25px 0 0; float: right; display: inline-block;">
<asp:Label ID="PersonName_txt" runat="server" Text='<%# Bind("Q_pName") %>'></asp:Label>
<asp:Label ID="porside" runat="server" Text="پرسيده :"></asp:Label>
</div>
<div style="margin: 0 0 0 25px; float: left; display: inline-block;">
<asp:Label ID="DateTime_txt" runat="server" Text='<%# Bind("Q_dateTime") %>'></asp:Label>
</div>
</div>
<div id="QestionAndAnswer_body" style="margin: 0; padding: 0 7px 0 7px; width: 100%; display: block; text-align: right;">
<asp:Label ID="Question_txt" runat="server" Text='<%# Bind("Q_question") %>'></asp:Label>
<asp:Literal ID="Literal1" runat="server" Text="<hr />پاسخ : "></asp:Literal>
<asp:Label ID="Answer_txt" runat="server" Text='<%# Bind("Q_answer") %>'></asp:Label>
</div>
<div id="QestionFooter" style="margin: 0; height: 28px; width: 100%; background-color: gray; display: block;">
<div style="margin: 0 25px 0 0; float: right; display: inline-block;">
<asp:HyperLink ID="PersonWebSite" Text="وب سايت" NavigateUrl='<%# Bind("Q_pWebAddr") %>' ForeColor="White" ToolTip="وب سايت فرستنده سوال" runat="server"></asp:HyperLink>
<asp:HyperLink ID="PersonEmail" Text="ايميل" NavigateUrl='<%# Bind("Q_pEmailAddr") %>' ForeColor="White" ToolTip="ايميل فرستنده سوال" runat="server"></asp:HyperLink>
</div>
<div style="margin: 0 0 0 25px; float: left; display: inline-block; vertical-align: bottom">
<asp:ImageButton ID="Q_Publish" ToolTip="انتشار سوال" runat="server" ImageUrl="~/Images/Admin Panel Icons/Command/Update.png" />
<asp:ImageButton ID="Q_Answer" ToolTip="پاسخ به سوال" runat="server" ImageUrl="~/Images/Admin Panel Icons/Command/Edit.png" />
<asp:ImageButton ID="Q_Delete" ToolTip="حذف سوال" runat="server" ImageUrl="~/Images/Admin Panel Icons/Command/delete.png" Height="16px" />
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
میبینید که عناصرم رو به صورت inLine ، استایل دهی کردم . حالا اگر بخوام کد css زیر رو از StyleSheet صفحه ام بخونم و روی اون اعمال کنم ، اینکار انجام نمیشه :
div#QusetionHeader
{
background-color:#55676b;
transition:background-color ease 1s;
-o-transition:background-color ease 1s;
-webkit-transition:background-color ease 1s;
-moz-transition:background-color ease 1s;
}
div#QusetionHeader:hover
{
background-color:#e4f783;
}
و یا اینکه کد JQuery ای که در ادامه گذاشته ام ، فقط روی اولین عنصری که Repeater ساخته قابل اجرا هستند و عناصر دیگه از اون تبعیت نمیکنند . حتی اگر برای عناصرم از id استفاده نکنم و جای اون از class استفاده کنم ، با کلیک بر هر عنصر ، تمامی عناصر افکت روشون اعمال میشه که این مطلوب نیست !
<script type="text/javascript">
$(document).ready(function () {
$("#QusetionHeader").click(function () {
$("#QestionAndAnswer_body").slideToggle();
$("#QestionFooter").slideToggle();
})
});
</script>
پس خلاصه سوال من ::
1. برای اعمال Css از StyleSheet روی عناصر داخل Repeater چکار باید بکنم ؟
2. برای اعمال صحیح کدهای Jquery روی تک تک عناصر تکرار شونده چکار باید بکنم ؟
(احتمال میدم چون id باید یکتا باشه ، این مشکل اتفاق می افته . ولی اجرا که گرفتم ف در مرورگر حین اجرا دیدم که برای تمام عناصر ، id کاملا یکسان در نظر گرفته !)