javascript - jQuery 选择器 - "this"或 "data"？

Question

我想选择一堆单独的元素。我已经用 addClass、toggleClass、removeClass 完成了简单的 jquery，我已经很好地掌握了它。但如果我继续沿着这条路走下去，我的 JS 将是大量带有 toggleClass 的 .click 函数。

如何一次只定位一个元素？目前它打开所有三个选择器元素。最终，这将构建成更大的东西，但对于这一部分，我需要以更通用的方式针对特定元素。我认为数据属性需要存储在变量或其他东西中，然后在单击时选择元素时以这种方式引用。但我不确定该怎么做。

这是我的代码:

$('.picker .container header').click(function() {
  $('.picker .pick').toggleClass('show');
  $('.picker .container header').toggleClass('minus');
});

.picker {
	display: inline-block;
	vertical-align: top;
}

.picker {
    width: 20%;
    margin-right: 10px;
}

.picker .container {
    width: 100%;
}

.picker .container header {
    color: #fff;
    background-color: #000;
    padding: 10px;
    transition: .4s ease-in;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: pointer;
}

.picker .container header.minus:after,
.picker .container header:after {
    font-family: fontawesome;
    margin-left: 10px;
}

.picker .container header:after {
	content: "\f055";
}

.picker .container header.minus:after {
    content: "\f056";
}

.picker .pick {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="picker">

  <div class="container">
    <h1 class="buildit">Build Your Own Site:</h1>
  </div>


  <!-- ********** PICK YOUR MENU ********** -->
  <div class="container">
    <header>Pick Your Menu Style:</header>
    <div class="navpick pick" data-pick="navpicker">
      <ul>
        <li class="btn btn-default" id="fixedtop">Fixed Top</li>
        <li class="btn btn-default" id="statictop">Static Top Navbar</li>
        <li class="btn btn-default" id="static">Static Navbar</li>
      </ul>
    </div>
  </div>

  <!-- ********** PICK YOUR HERO ********** -->
  <div class="container">
    <header>Pick Your Hero Style:</header>
    <div class="heropick pick" data-pick="heropicker">
      <ul>
        <li class="btn btn-default" id="bggifness">Background GIF</li>
        <li class="btn btn-default" id="bgvid">Background Video</li>
        <li class="btn btn-default" id="narrow">Fixed Width</li>
        <li class="btn btn-default" id="jumbo">Jumbotron</li>
        <li class="btn btn-default" id="slider">Slider</li>
      </ul>
    </div>
  </div>


  <!-- ********** PICK YOUR LAYOUT ********** -->
  <div class="container">
    <header>Pick Your Layout:</header>
    <div class="layoutpick pick" data-pick="layoutpicker">
      <ul>
        <li class="btn btn-default" id="magazine">Magazine</li>
        <li class="btn btn-default" id="prod2">2 product</li>
        <li class="btn btn-default" id="prod3">3 product</li>
        <li class="btn btn-default" id="prod4">4 product</li>
      </ul>
    </div>
  </div>


</div>

Answer 1

使用 this 和 next() 方法只定位紧随其后的元素:

$('.picker .container header').click(function() {
  $(this).next('.pick').toggleClass('show');
  $(this).toggleClass('minus');
});

或者链接操作:

$('.picker .container header').click(function() {
  $(this).toggleClass('minus').next('.pick').toggleClass('show');
});

$(function() {
  $('.picker .container header').click(function() {
    $(this).toggleClass('minus').next('.pick').toggleClass('show');
  });
});

.picker {
  display: inline-block;
  vertical-align: top;
}
.picker {
  /* width: 20%; */
  margin-right: 10px;
}
.picker .container {
  width: 100%;
}
.picker .container header {
  color: #fff;
  background-color: #000;
  padding: 10px;
  transition: .4s ease-in;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}
.picker .container header.minus:after,
.picker .container header:after {
  font-family: fontawesome;
  margin-left: 10px;
}
.picker .container header:after {
  content: "\f055";
}
.picker .container header.minus:after {
  content: "\f056";
}
.picker .pick {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="picker">

  <div class="container">
    <h1 class="buildit">Build Your Own Site:</h1>
  </div>


  <!-- ********** PICK YOUR MENU ********** -->
  <div class="container">
    <header>Pick Your Menu Style:</header>
    <div class="navpick pick" data-pick="navpicker">
      <ul>
        <li class="btn btn-default" id="fixedtop">Fixed Top</li>
        <li class="btn btn-default" id="statictop">Static Top Navbar</li>
        <li class="btn btn-default" id="static">Static Navbar</li>
      </ul>
    </div>
  </div>

  <!-- ********** PICK YOUR HERO ********** -->
  <div class="container">
    <header>Pick Your Hero Style:</header>
    <div class="heropick pick" data-pick="heropicker">
      <ul>
        <li class="btn btn-default" id="bggifness">Background GIF</li>
        <li class="btn btn-default" id="bgvid">Background Video</li>
        <li class="btn btn-default" id="narrow">Fixed Width</li>
        <li class="btn btn-default" id="jumbo">Jumbotron</li>
        <li class="btn btn-default" id="slider">Slider</li>
      </ul>
    </div>
  </div>


  <!-- ********** PICK YOUR LAYOUT ********** -->
  <div class="container">
    <header>Pick Your Layout:</header>
    <div class="layoutpick pick" data-pick="layoutpicker">
      <ul>
        <li class="btn btn-default" id="magazine">Magazine</li>
        <li class="btn btn-default" id="prod2">2 product</li>
        <li class="btn btn-default" id="prod3">3 product</li>
        <li class="btn btn-default" id="prod4">4 product</li>
      </ul>
    </div>
  </div>


</div>