使用 jQuery 找到正确的选择器答案

【问题标题】：Finding correct selector using jQuery使用 jQuery 找到正确的选择器
【发布时间】：2016-10-06 20:20:34
【问题描述】：

我似乎无法使用 jQuery 识别正确的选择器。我正在尝试根据用户的选择隐藏/显示 div。

      <div class="tabs-panel is-active" id="panel1v">
        <div class="active-panel-tab">
          <%= render 'dropdown_grid_selection' %>
          <%= render 'one_box' %>
          <%= render 'two_box' %>
        </div>
      </div>

然后在这个部分中，我有一个下拉选择框，用户可以选择 1、2 或 3 个框。如果他们选择其中一个，则应隐藏两个框选项。

$('a > #one_box').click(function() {
  $('.tabs-panel.is-active > .active-panel-tab').hide('.two_box_wrapper')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_grid">
  <ul class="dropdown menu" data-dropdown-menu data-alignment="right">
    <li>
      <a href="#" class="fa fa-plus-square fa-2x"></a>
      <ul class="pane_choice menu vertical medium-horizontal">
        <li><a href="#" id="one_box">1 Box</a></li>
        <li><a href="#" id="two_box">2 Boxes</a></li>
        <li><a href="#" id="three_box">3 Boxes</a></li>
      </ul>
    </li>
  </ul>
</div>

【问题讨论】：

你的问题很不清楚，但我怀疑你想要的选择器是$('.tabs-panel.is-active > .active-panel-tab .two_box_wrapper')
'a > #one_box' 在<a> 中选择#one_box，根据您的HTML，这是不正确的。由于 ID 是高度特定的选择器，因此只需选择它即可：$('#one_box')
你需要更具体，但我可以告诉你选择器 a> #one_box 是错误的 CSS 选择器 > 如果 a 是 #one_box 的直接父级，则可以工作，尝试删除选择器 > 并检查。

标签： javascript jquery css ruby-on-rails

【解决方案1】：

$("ul.pane_choice>li>a").click(function(e) {
    e.preventDefault();
    var idPart = $(this).attr("id"),currEle=$("." + idPart + "_wrapper"),
    divs = $(".tabs-panel>.active-panel-tab>div").not(currEle);       
    divs.hide();
    currEle.show();
});

Here's a fiddle

【讨论】：

【解决方案2】：

如果您在 chrome 中查看 HTML，请打开开发人员工具。然后，您可以右键单击元素面板中的元素，然后单击复制->选择器以找到将指向该元素的选择器。通过在控制台中试验该选择器从那里继续。

【讨论】：

【解决方案3】：

听起来您想隐藏其他两个未被选中的框。我认为应该使用 if else 语句。就像单击 box1，使用他们的 ID 隐藏 box2 和 3

【讨论】：