javascript - 在 jQuery 中准确定位 <div>

Question

我正在为我的应用程序的用户构建一个交互式测验。这些问题基于表格，可以回答"is"、“否”或“也许”。如果用户回答“否”或“也许”，我会滑动打开位于 table 下方的信息面板。

这是表格和信息面板的代码:

<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 -->

这是我的 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;
    }
});
});

但是，我的解决方案会展开页面上 .notes_main_wrap div 的每个实例(有四个)。我只想展开下一个实例，而不是全部。我需要使用什么 jQuery 选择器来仅定位页面上类的下一个实例？

Answer 1

要获取下一个元素，您可以首先向上搜索到最近的 '.table-responsive' 父元素，然后获取下一个元素: $(this).closest('.table-responsive').next ('div').find('.js-notes > a') 幸运的是，您可以将这 2 个功能合并为一个，并使用 toggleClass 和 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;
    }
});

示例:Fiddle

注意:原始工作方式没有改变，其中只有最后更改的输入决定是否显示评论。如果您想检查是否有任何选项为"is"，则需要进行额外的查询。

NB2:id 和切换值在示例 html 中并不完全准确，在复制/粘贴示例中也不完全准确，因此复选框可能会影响其中一个或另一个。然而，就查找下一个 js 注释等而言，jquery 代码本身应该可以工作。