عدم اعمال Css روی عناصر Repeater

[mohammad973]

سلام دوستان .

من یک کنترل Repeater دارم که توی اون یک سری عناصر html گذاشتم و از دیتابیس مقدار میگیرند .

1.مشکل اینجاست که با جی کوئری نمیشه خوب بهشون کد داد .
2.همچنین Cssهم روی اونا اعمال نمیشه !
3.آیا میشه در repeater ، کاری کرد که به هر عنصری که داره تکرار میشه ، یه id منحصر بفرد داینامیک بده؟

[aebrs@yahoo.com]

نمونه کد جکوئری و نمونه کد سی اس اس را بگذارید بهتر می توان جواب داد

[mohammad973]

ببینید دوست من ، این کد 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>&nbsp;

                        </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>&nbsp;

                        </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>&nbsp;

                <asp:Literal ID="Literal1" runat="server" Text="<hr />پاسخ : "></asp:Literal>&nbsp;

                <asp:Label ID="Answer_txt" runat="server" Text='<%# Bind("Q_answer") %>'></asp:Label>&nbsp;

                    </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>&nbsp;

                            <asp:HyperLink ID="PersonEmail" Text="ايميل" NavigateUrl='<%# Bind("Q_pEmailAddr") %>' ForeColor="White" ToolTip="ايميل فرستنده سوال" runat="server"></asp:HyperLink>&nbsp;

                        </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" />&nbsp;

                    <asp:ImageButton ID="Q_Answer" ToolTip="پاسخ به سوال" runat="server" ImageUrl="~/Images/Admin Panel Icons/Command/Edit.png" />&nbsp;

                    <asp:ImageButton ID="Q_Delete" ToolTip="حذف سوال" runat="server" ImageUrl="~/Images/Admin Panel Icons/Command/delete.png" Height="16px" />&nbsp;

                        </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 کاملا یکسان در نظر گرفته !)

[aebrs@yahoo.com]

من تصور می کنم این جوری جواب بدهد

<div id="QusetionHeader" class="Question">

و در Css هم اینجوری نوشته بشود

.Question{color:red;}

در مورد jQuery هم با کلاس خیلی راحتتر جواب میدهد تا بخواهید از Id استفاده کنید
امیدوارم کمک کرده باشد

[mRizvandi]

بله دوستمون درست می گن
به دلیل تغییر Id عناصر ASP.NET در زمان اجرا، شما نمی تونید با jQuery یا احیانا Css به اون تگ برسید. بهتره که از کلاس استفاده کنید تا در زمان اجرا هم همون نام مورد استفاده باشه.
البته برای jQuery راه حل هست. اون هم اینکه می تونید از ClientId استفاده کنید.

[sh-eng]

ببین تو هر صفحه از هر id در css فقط یکبار مجاز هستی استفاده کنی و چون داری با repeater اونو تکرار می کنی css اعمال نمیشه هرچی id داری به class تبدیل کن

[mohammad973]

خوب دوستان گفتم که ، با کلاس هم به نتیجه دلخواه نمیرسم ::

حتی اگر برای عناصرم از id استفاده نکنم و جای اون از class استفاده کنم ، با کلیک بر هر عنصر ، تمامی عناصر افکت روشون اعمال میشه که این مطلوب نیست !

[mohammad973]

دوستان ، div به id برابر با QusetionHeader رو ، تغییر دادم به کلاس با همین مقدار . ولی مابقی عناصر رو همون id گذاشتم مشکلم برطرف شد !