مسج nextAll - انقر على ح عنصر تبديل كل العناصر ص حتى ساعة القادمة

Question

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

<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

وكيف يمكنني تبديل جميع العناصر p تابعة لسؤال معين؟ بلدي JS إلى تحويل كافة التالية، عناصر p على الصفحة:

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $(this).nextAll("p").toggle();
    });
});

وأنا لا يمكن استخدام لdiv أو الطبقات).

Answer 1

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

$(function() {
   $("p").hide();
   $("h3").click(function() {
       $(this).nextAll().each( function() {
           if ($(this).filter('h3').length) {
              return false;
           }
           $(this).filter('p').toggle();
       });
   });
});

Answer 2

وأود أن تفعل ذلك بهذه الطريقة:

$(function() {
  $("p").hide();
  $("h3").click(function() {
    $(this).nextAll().each(function() {
      if ($(this).is('h3')) {
        return false;
      }
      $(this).toggle();
    });
  });
});

وبالعودة كاذبة من كل () تنتهي السلسلة.

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

<h3 class="question">Why is there no soup for me?</h3>
<div class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

وثم المشكلة يصبح تافها إلى حل:

$(function() {
  $("div.answer").hide();
  $("h3.question").click(function() {
    $(this).next().toggle();
  });
});

Answer 3

وهنا هو الحل للاهتمام التي لا تستخدم. كل ()

$("h3").click(function() {

    var idx = $("h3,p").index(this);
    var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
    var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
    $(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();

});

وأنا أبحث عن ومز التالي من خلال مؤشر. غير متأكد من كيفية عملي هذا، ولكنه كان ممارسة جيدة.

Answer 4

وأوصي مسج nextUntil ()؛

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $("h3").nextUntil("h3").toggle();
    });
});