Question

我似乎无法使用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>

Answer 1

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

Answer 2

听起来你想隐藏另外两个尚未被选中的盒子。我认为if else语句应该这样做。就像点击box1一样，使用他们的ID隐藏box2和3

Answer 3

$("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

使用jQuery查找正确的选择器

3 个答案: