JQuery.Ask () مشكلة

Question

سأحاول الحفاظ على هذا القصير. أحاول إنشاء مربعات من النص الذي يخفيه أو إظهاره عند النقر فوق المستخدم على زر Expand. أنا أستخدم طريقة Toggle ().

العلامة هي مثل هذا:

<span id="toggle0">+</span>
<div id="toggle0Container">
    blablabla...
<div>

<span id="toggle1">+</span>
<div id="toggle1Container">
    blablabla...
<div>

<span id="toggle2">+</span>
<div id="toggle2Container">
    blablabla...
<div>

// etc

من المفترض أن يقوم Toggle0 بتبديل # Toggle0Container، يقوم TOGGLE1 بتبديل # Toggle1Container وهلم جرا. يتم إنشاء كل ذلك من قبل PHP لذلك يمكن أن يكون هناك أي عدد من هذه الحاويات.

إليك رمز مسج:

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function() {
        $('#toggle' + this + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function() {
        $('#toggle' + this).click(function() {
            // this line is not working
            $('#toggle' + this + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

إنه يعمل باستثناء الجزء التبعي (أضفت تعليق أعلى الخط الذي لا يعمل). أين المشكلة؟

Answer 1

أود أن اتبع نهج المهاجرين ولكن إذا كنت ترغب حقا في القيام بشيء صفيف، أو فقط أريد معرفة كيفية استخدام كل () بشكل صحيح، إليك هنا كيف يجب عليك استخدامها:

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item).click(function() {
            // this line is not working
            $('#toggle' + item + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

Answer 2

هذا لأن "هذا" الآن في نطاق مختلف، وهو يشير إلى عنصر DOM الفعلي، وليس أحد الأرقام الموجودة في الصفيف.

أود أن أقترح عليك تخلاص مجموعة الأرقام، واستخدام محدد مختلفة، شيء مثل:

$("div[id^=toggle][id$=container]").hide();

$("span[id^=toggle]").click(function() {
     $(this).find("span[id^=toggle][id$=container]").slideToggle("slow");
     // .. do your other html stuff
}

فقط خاتم تلك كل من كل شخصيات واستبدال مختارات تبديل مع تلك.

Answer 3

تعديل

أنا أحب محلول mgroves أفضل لحالة استخدامك الخاص، لكنني سأترك إجابتي التي تشرح كيف يمكنك قبول الفهرس والعنصر كمعلمة في الطريقة.

الإجابة الأصلية

كما قال آخرون، سياق هذه ليس ما تعتقد أنه في النقطة التي تشير إليها. إليك مقالة رائعة عن طريق ريمي شارب بعنوان "JQuery's هذا: خلاصة"أنني أوصي بقراءة.

يمكن أن تقبل دالة الشاطئ معلمين سيساعدونك كثيرا ولن تحتاج إلى مجموعة من الأرقام.

$('span[id^=toggle']').each(function(idx, elem) {

    // idx is the current index of the jQuery object
    $('#toggle' + idx).click(function() {

        // elem is the current element
        $(elem).next('#toggle' + idx + 'Container').slideToggle('slow');

        if ($(elem).html() == '+') {
            $(elem).html('-');
        } else {
            $(elem).html('+');
        }

    });

});

Answer 4

أود أن أقترح وضع فئة على زر تبديلك (span) مثل "toggler" وعلى حاوية تبديل مثل "الحاوية" أو أي شيء من أجل تبسيط جافا سكريبت:

$(function() {
    // hide all containers first
    $(".container").hide();
    // now the toggle buttons
    $(".toggler").click(function() {
          var container = $("#" + $(this).attr("id") + "Container");
          container.slideToggle("slow");

          $(this).html(container.is(":visible") ? "-" : "+");
    });
});

أعط أن الطلقة.

Answer 5

كما قال MGROVES، فإن نطاقك يزداد جميعا باستخدام كل (). يرى هذه للمزيد من المعلومات.

Answer 6

كنت على وشك النشر بالضبط ما فعله ماكس حول استخدام فئة. أود تحسين اقتراحه مع هذا المحدد الأسهل للعثور على الحاوية:

$(function() {
  // hide all containers first
  $(".container").hide();
  // now the toggle buttons
  $(".toggler").click(function() {
    $(this).next().slideToggle("slow");

    if (container.is(":visible")) {
      $(this).html("-");
    }
    else {
      $(this).html("+");
    }
  });
});

إذا لم تتمكن من الحصول بسهولة على الطبقات على الممتد، فمن المحتمل أن تتمكن من إنشاء محدد مماثل باستخدام شيء مثل $ ('# spancontainer> span') لتحديدها حسب اسم العلامة، تنازلي عن عنصرها المحتوي عليها.

Answer 7

يجب عليك إعطاء عناصرك فئة يمكن البحث فيها، ثم الاستفادة من next.

اجعل علامتك شيئا مثل هذا:

<span class="toggleButton">+</span>
<div class="toggleContainer">
   blablabla...
<div>

الآن، يصبح الكود الخاص بك للتعامل مع هذا بسيطة مثل هذا:

$('.toggleButton').click(function() {
    $(this).next('.toggleContainer').slideToggle('slow');
});

Answer 8

لقد كتبت مؤخرا نص جوهري إلى حد ما للسلوك تماما مثل هذا. أخذت طريقا مختلفا قليلا في أنني اخترت لف جميع عناصر عنصر إخفاء / عرض معين في Div. يتيح لك أن يكون لديك متعددة "مشغلات" لقسم واحد إذا كنت في حاجة إليها، ويمكنك إضافة عدد تعسفيا من عناصر إخفاء / عرض دون القلق بشأن ترقيمها. أود أن هيكلها شيء مثل هذا:

<div class="expSecWrapper">
    <div class="expSecTrigger">Insert Trigger Here</div>
    <div class="expSecBody">
        Content to hide/show
    </div>
</div>

ومن ثم رمز مسج سيكون مثل هذا:

$(document).ready(function(){
    var targets = $(".expSecWrapper")
    targets.find(".expSecTrigger").click(function(){
        targets.find(".expSecBody").hide()
        $(this).parents(".expSecWrapper").eq(0).children(".expSecBody").toggle();
    })
})

يمكنك إضافة js ذات الصلة المتبقية للتطبيق الخاص بك.

لديها بعض القيود، مثل الضرورة أن الجسم إخفاء / المعرض هو سليل مباشر من المجمع. يمكن تطبيقها على انخفاض داونز، أزرار الراديو، أيا كان. إنه أيضا عش قادر حتى تتمكن من الحصول على مستويات متعددة إذا اختبأ / إظهار.

شيء أخير هو أنك في الواقع لا تحتاج حتى إلى استخدام الاتصال المستقيم. سيقوم بشيء مثل .Click () تعيين السلوك إلى مجموعة كاملة من كائنات JQuery. طالما كنت تستخدم محدد من شأنه أن يحصل على جميع أهدافك.

آسف، اضطر لتعديل ذلك مرتين.