jQuery مع المحتوى الديناميكي

Question

إذا كان لدي علامة div داخل مكرر ، وأريد إضافة تأثير jQuery إلى كل واحد من علامات Div هذه ، كيف سيتم ذلك؟

   <script type="text/javascript">
    $(function() {
        //run the currently selected effect
        function runEffect() {
            //most effect types need no options passed by default
            var options = {};
            //check if it's scale, transfer, or size - they need options 
            //if (selectedEffect == 'scale') { options = { percent: 0 }; }

            //run the effect
            $("#effect").effect('explode', options, 500, callback);
        };

        //callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
            $("#effect:hidden").removeAttr('style').hide().fadeIn();
            }, 1000);
        };

        //set effect from select menu value
        $(document).ready(function() {
            $("div.effect").click(function() {
                runEffect();
                return false;
            });
        });
    });
</script>

<asp:Repeater ID="repItems" runat="server">
    <ItemTemplate>
 <div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
   <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
  </div> 
 </div>
 </ItemTemplate>
</asp:Repeater>

جربت ما سبق ، ولكن فقط أعمال DIV الأولى. ما الخطأ الذي افعله؟؟

Answer 1

حاول استخدام فصل لتلك divs مثل:

<div id="effect" class="effect ui-widget-content ui-corner-all">

وفي jQuery استخدام ("div.effect") المحدد.

"أعتقد" أن استخدام نفس المعرف لأشياء متعددة قد يتسبب في المشكلة ...

Answer 2

ال id القيم على عناصر HTML يجب أن تكون فريدة من نوعها عبر المستند بأكمله. أنت تستخدم نفس الشيء id قيمة لكل عنصر يعرضه هذا المكرر ، في انتهاك لهذه القاعدة. الآن ، الويب هو ما هو عليه ، لا يشتكي متصفحك من ذلك ، ولكن حاول تشغيل HTML المقدم المدقق. يعمل jQuery فقط على العنصر الأول من هذا القبيل ، لأنه يتوقع هناك يكون واحد فقط.

إذا قمت بالتبديل من id ل class, ، يجب أن يكون لديك نتائج أفضل بكثير.

Answer 3

فكرة أخرى يجب مراعاتها هي وضع علامة div مع معرف حول المكرر. يبدو المكرر نفسه واضحًا ومباشرًا وينظر إلى jQuery الخاص بك ، لا يبدو أنه يهم أي من علامات DIV في المكرر يتم النقر عليه.

    $(document).ready(function() {
  $("#base").click(function() {
  runEffect();
  return false;
    });
});



<div id="base">
    <asp:Repeater ID="repItems" runat="server">
        <ItemTemplate>
     <div class="toggler">
      <div id="effect" class="ui-widget-content ui-corner-all">
       <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
      </div> 
     </div>
     </ItemTemplate>
    </asp:Repeater>
</div>

Answer 4

أعتقد أن ما تحتاج إلى تغييره هو في وظيفة "جاهزة" حيث يمكنك إرفاق حدث النقر - فأنت تستخدم $ ('div.effect') كمحدد ، والذي لا يبدو صالحًا بالنسبة لي. أقترح استخدام $ ('. ui-widget-content'). هذا يختار بناءً على الفصل ، بدلاً من المعرف (الذي يجب أن يكون فريدًا كما لاحظ الآخرين).

Answer 5

إذا كنت لا ترغب في استخدام فصل دراسي على تلك divs المتداخلة في المكرر الخاص بك ، فيمكنك استخدام مطابقة المعرف الجزئي. على الرغم من أن المكرر سيضيف معلومات إلى بداية معرفك لكل DIV (لضمان فريدة من نوعها) ، إلا أن المعرف سيظل ينتهي في "التأثير" ، أو أي اسم استخدمته.

يمكنك استخدام هذا لصالحك. في رمز jQuery الخاص بك ، حيث تعمل على معرف "التأثير" ، قم بتغيير الكود الخاص بك من هذا:

$("#effect")

الى هذا:

$("[id$='effect']")

سيؤدي ذلك إلى تحديد جميع العناصر التي ينتهي هويتها في "التأثير" ، لذلك عندما يقوم المكرر بإعادة تسمية معرف كل div إلى "repitems_ ctl001_ effect" أو ماذا لديك ، ستظل jQuery تجدها.

لاحظ أيضًا ، في نهاية رمز jQuery الخاص بك المدرج في سؤالك ، أنت تحاول الوصول إلى DIV بناءً على "تأثير" الفصل ، بدلاً من المعرف. مجرد لمعلوماتك.