Question

我正在为我的应用用户构建互动测验。问题是基于表格的，可以回答“是”，“否”或“可能”。如果用户回答“否”或“可能”，我会打开一个位于桌子下方的信息面板。

以下是表格和信息面板的代码：

<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') 幸运的是，您可以将两个功能组合成一个并切换切换，以便与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

注意：只有 last 更改输入的原始工作确定是否显示注释，不会更改。如果您想检查是否有任何选项是'是'，则需要另外一个查询。

NB2：ids和toggle值为..uhm ..在示例html中并不完全准确，它们也不在复制/粘贴示例中，因此复选框可能会影响其中一个。然而，jquery代码本身应该可以找到下一个js注释等。

在jQuery

1 个答案: