كيفية تمرير متغير حسب القيمة إلى وظيفة JavaScript مجهولة المصدر؟

Question

الهدف

أرغب في تعيين معالجات الأحداث ديناميكيًا لبعض divs على الصفحات في جميع أنحاء الموقع.

طريقتي

أنا باستخدام jQuery لربط وظائف مجهولة كمعالجات لأحداث DIV المحددة.

المشكلة

يكرر الكود مجموعة من أسماء DIV وعنوان URL المرتبطة بها. يتم استخدام اسم DIV لتعيين الهدف الرابط ، أي إرفاق معالج الحدث هذا الحدث DIV.

على الرغم من أن معالجات الأحداث مرتبطون بنجاح بكل من أحداث DIV ، فإن الإجراءات التي تسببها معالجات الأحداث هذه تستهدف العنصر الأخير فقط في الصفيف.

لذا فإن الفكرة هي أنه إذا كان المستخدم يزداد على Div معين ، فيجب أن يدير الرسوم المتحركة للانزلاق لهذا div. ولكن بدلاً من ذلك ، فإن mousing على Div1 (Rangetaball) يؤدي إلى رسوم متحركة شريحة لـ Div4 (Rangetabthm). وينطبق الشيء نفسه على divs 2 ، 3 ، إلخ. الترتيب غير مهم. قم بتغيير عناصر الصفيف حولها وستستهدف الأحداث دائمًا العنصر الأخير في المصفوفة ، Div4.

الكود الخاص بي - (يستخدم jQuery)

var curTab, curDiv;
var inlineRangeNavUrls=[['rangeTabAll','range_all.html'],['rangeTabRem','range_remedial.html'],
                ['rangeTabGym','range_gym.html'],['rangeTabThm','range_thermal.html']];
        for (var i=0;i<inlineRangeNavUrls.length;i++)
        {
            curTab=(inlineRangeNavUrls[i][0]).toString();
            curDiv='#' + curTab;
            if  ($(curDiv).length)
            {
                $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
                $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} );
            }
        }

نظريتي

أنا إما لا أرى خطأ بناء جملة واضح أو مشكلة مرجعية. في البداية كان لدي العبارة التالية لتعيين قيمة كورتب:

curTab=inlineRangeNavUrls[i][0];

لذلك عندما حدثت المشكلة ، اعتقدت أنني عندما تغيرت (عبر تكرار الحلقة) الإشارة إلى كورتاب ، كنت في الواقع التغيير المرجع لجميع معالجات الأحداث المجهولة السابقة إلى قيمة كورتب الجديدة أيضًا .... وهذا هو السبب في أن معالجات الأحداث استهدفوا دائمًا آخر Div.

إذن ما كنت بحاجة إلى فعله حقًا هو تمرير كورتب القيمة إلى معالجات أحداث الوظائف المجهولة ، وليس كورتاب هدف المرجعي.

لذلك فكرت:

curTab=(inlineRangeNavUrls[i][0]).toString();

سيصلح المشكلة ، لكنه لا. نفس الصفقة. من الواضح أنني أفتقد بعض المفاتيح ، وربما أساسية للغاية ، فيما يتعلق بالمشكلة. شكرًا.

Answer 1

تحتاج إلى إنشاء متغير جديد في كل تمريرة عبر الحلقة ، بحيث يتم التقاطها في الإغلاق الذي تقوم بإنشائه لموجهات الأحداث.

ومع ذلك ، فإن مجرد نقل الإعلان المتغير إلى الحلقة لن ينجز هذا ، لأن JavaScript لا يقدم نطاقًا جديدًا للكتل التعسفية.

تتمثل إحدى الطرق السهلة لفرض إدخال نطاق جديد في استخدام وظيفة مجهولة أخرى:

for (var i=0;i<inlineRangeNavUrls.length;i++)
{
  curDiv='#' + inlineRangeNavUrls[i][1];
  if ($(curDiv).length)
  {
    (function(curTab)
    {
      $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
      $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} );
    })(inlineRangeNavUrls[i][0]); // pass as argument to anonymous function - this will introduce a new scope
  }
}

كما يقترح جيسون, ، يمكنك بالفعل تنظيف هذا الأمر قليلاً باستخدام JQuery المدمج في hover() وظيفة:

for (var i=0;i<inlineRangeNavUrls.length;i++)
{
  (function(curTab) // introduce a new scope
  {
  $('#' + inlineRangeNavUrls[i][1])
    .hover(
      function(){showHideRangeSlidingTabs(curTab, true);},
      function(){showHideRangeSlidingTabs(curTab, false);} 
    );
  // establish per-loop variable by passsing as argument to anonymous function
  })(inlineRangeNavUrls[i][0]); 
}

Answer 2

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

ما عليك القيام به هو تغيير هذا:

$(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );

الى هذا:

$(curDiv).bind("mouseover", 
    (function (mylocalvariable) { 
        return function(){
            showHideRangeSlidingTabs(mylocalvariable, true);
        } 
    })(curTab) 
);

سيؤدي ذلك إلى نسخ قيمة Curtab إلى نطاق الوظيفة الخارجية ، والتي ستتخذه الوظيفة الداخلية معها. يحدث هذا النسخ في نفس الوقت الذي تربط فيه الوظيفة الداخلية مع معالج الأحداث ، لذلك يعكس "mylocalvariable" قيمة كورتاب في ذلك الوقت. ثم في المرة القادمة حول الحلقة ، سيتم إنشاء وظيفة خارجية جديدة ، مع نطاق جديد ، والقيمة التالية من كورتاب نسخت فيها.

تنجز إجابة Shog9 نفس الشيء بشكل أساسي ، لكن رمزه أكثر تقوية قليلاً.

إنه معقد نوعًا ما ، لكنه منطقي إذا فكرت في الأمر. الإغلاق غريب.

تحرير: عفوًا ، نسيت إرجاع الوظيفة الداخلية. مُثَبَّت.

Answer 3

أعتقد أنك تجعل هذا أكثر تعقيدًا مما يجب أن يكون. إذا كان كل ما تفعله هو تعيين تأثير انزلاقي على Mouseover/Out ، فحاول يحوم تأثير مع jQuery.

$("#mytab").hover(function(){
    $(this).next("div").slideDown("fast");},
  function(){
    $(this).next("div").slideUp("fast");
});

إذا قمت بنشر HTML الكامل ، يمكنني أن أخبرك بالضبط عن كيفية القيام بذلك :)

Answer 4

يمكنك وضع قيمة المتغير في علامة غير موجودة ، ثم يمكنك قراءتها من هناك. هذا المقتطف هو جزء من جسم حلقة:

 s = introduction.introductions[page * 6 + i][0]; //The variables content
 $('#intro_img_'+i).attr('tag' , s);              //Store them in a tag named tag
 $('#intro_img_'+i).click( function() {introduction.selectTemplate(this, $(this).attr('tag'));}  );  //retrieve the stored data