Dokładne kierowanie <div> w jQuery - javascript, jquery, html

Tworzę interaktywny quiz dla użytkowników mojegoaplikacja. Pytania są oparte na tabelach i można na nie odpowiedzieć „tak”, „nie” lub „może”. Jeśli użytkownik odpowie „nie” lub „może”, otworzyłbym panel informacyjny znajdujący się pod tabelą.

Oto kod tabeli i panelu informacyjnego:

<div class="row quiz">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr class="active">
<th colspan="3"><strong>1. Executive Support</strong></th>
<th><strong>Yes</strong></th>
<th><strong>No</strong></th>
<th><strong>Don"t Know</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Do the executives prioritize—or express a desire to prioritize—initiatives based on patient and family needs?</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="no-toggle" name="toggle" id="optionsRadios1" value="option1">
</label>
</div>
</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="toggle" name="toggle" id="optionsRadios2" value="option2">
</label>
</div>
</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="toggle" name="toggle" id="optionsRadios3" value="option3">
</label>
</div>
</td>
</tr>
<tr>
<td colspan="3">Do you have the support of your executive management group?</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="no-toggle" name="toggle2" id="optionsRadios2" value="option5">
</label>
</div>
</td>            <td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="toggle" name="toggle2" id="optionsRadios2" value="option5">
</label>
</div>
</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="toggle" name="toggle2" id="optionsRadios3" value="option6">
</label>
</div>
</td>
</tr>
<tr>
<td colspan="3"> Do you presently have commitment from key administrative and clinical champions to help overcome <br>the inevitable barriers to designing and delivering ideal care experiences?</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="no-toggle" name="toggle3" id="optionsRadios2" value="option5">
</label>
</div>
</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="toggle" name="toggle3" id="optionsRadios2" value="option2">
</label>
</div>
</td>
<td class="radio-button">
<div class="radio">
<label>
<input type="radio" class="toggle" name="toggle3" id="optionsRadios3" value="option3">
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- table-responsive-->
<div class="row notes_section clear">
<div class="notes_wrap js-notes">
<a href="#" class="active">Build More Executive Support in Your Organization</a>
<div class="notes_main_wrap" style="display: block;">
<div class="notes_item">
<p>If you"re having difficulty obtaining support from your organization"s leadership, it can help to demonstrate some of the real-world successes of other Working Groups. You can approach this in a variety of ways:</p>
<ol>
<li>Provide your leadership with  PFCC Step-by-Step: The Business Case [Document Forthcoming], which explains why PFCC Step-by-Step is the singular tool for care transformation.</li>
<li>Explain how front-line care givers that participate in PFCC Step-by-Step often experience an improved morale, as well as an  increased emotional connection with patients and families.</li>
<li>Explain that the principles of PFCC Step-by-Step have been endorsed by leading healthcare institutions worldwide. To further illustrate, <a href="https://www.youtube.com/watch?v=sGlJDk6WOxM&amp;list=PLqj3nHFwDQMRB4F_P4303ixiD_sxOQ0Vt&amp;index=61" target="_blank">share this video</a> with your leadership.
</li></ol>
</div><!-- /notes_item -->
</div><!-- notes_main_wrap -->
</div><!--notes_wrap -->
</div><!--notes_section -->

A oto moje jQuery:

$("document").ready(function() {

//Quiz Toggle Functionality
$("input:radio[class^="toggle"]").change(
function(){
if ($(this).is(":checked")) {
$(".js-notes > a").addClass("active");
$(".js-notes > a").next(".notes_main_wrap").slideDown();
return false;
}
});
$("input:radio[class^="no-toggle"]").change(
function(){
if ($(this).is(":checked")) {
$(".js-notes > a").removeClass("active");
$(".js-notes > a").next(".notes_main_wrap").slideUp();
return false;
}
});
});

Jednak moje rozwiązanie rozwija każde wystąpienieelement div .notes_main_wrap na stronie (jest ich cztery). Chcę rozwinąć tylko następną instancję, a nie wszystkie. Jakiego selektora jQuery potrzebuję, aby kierować tylko na następną instancję klasy na stronie?

Odpowiedzi:

Aby uzyskać następny element, możesz najpierw przeszukać w górę do najbliższego elementu nadrzędnego „.table-responsive”, a następnie pobrać następny element: $(this).closest(".table-responsive").next("div").find(".js-notes > a") Na szczęście możesz połączyć te dwie funkcje w jedną i przełączyć przełączanie, że tak powiem toggleClass i slideToggle:

$("input:radio.toggle, input:radio.no-toggle").change(
function(){
if ($(this).val()) {
var toggle = $(this).hasClass("toggle");

$(this).closest(".table-responsive").next("div").find(".js-notes > a")
.toggleClass("active", toggle)
.next(".notes_main_wrap").slideToggle(toggle);
return false;
}
});

Przykład: Skrzypce

Uwaga: oryginalny utwór, w którym tylko ostatni, ubiegły, zeszły zmienione dane wejściowe określają, czy komentarze są wyświetlane, pozostaje niezmienione. Jeśli chcesz sprawdzić, czy którakolwiek z opcji ma wartość „tak”, potrzebne będzie dodatkowe zapytanie.

NB2: identyfikatory i wartości przełączania były .. uhm ..nie do końca dokładne w przykładowym html, nie ma ich też w przykładzie skopiowanym / wklejonym, więc pola wyboru mogą wpływać na jedno i drugie. Jednak sam kod jquery powinien działać, jeśli chodzi o znajdowanie następnych notatek js itp.