Javascript jQuery选择器-"；这"；或；数据；？

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

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

这是我的密码：

$（'.picker.container header'）。单击（函数（）{
$（'.picker.pick'）.toggleClass（'show'）；
$（'.picker.container header'）.toggleClass（'减号'）；
});
.picker{
显示：内联块；
垂直对齐：顶部；
}
皮克先生{
宽度：20%；
右边距：10px；
}
.采摘器.容器{
宽度：100%；
}
.picker.容器标题{
颜色：#fff；
背景色：#000；
填充：10px；
过渡期：放松；
文本转换：大写；
字体大小：粗体；
边缘底部：10px；
光标：指针；
}
.picker.container header.减：之后，
.选择器.容器标题：后{
字体系列：Fontsome；
左边距：10px；
}
.选择器.容器标题：后{
内容：“\f055”；
}
.选择器.容器标题.减：后{
内容：“\f056”；
}
.拾音器，拾音器{
显示：无；
}

建立自己的网站：
选择您的菜单样式：

固定顶部
静态顶部导航栏
静态导航栏

选择你的英雄风格：

背景GIF
背景视频
固定宽度
Jumbotron
滑块

选择您的布局：

杂志
2产品
3产品
4产品

有很多方法可以解决这个问题。但是在您的例子中，使用
$（“.picker.pick”）
选择器将返回三个元素。您需要将其过滤到各个元素

例如，如果只希望以第一个元素为目标，可以使用
：eq
选择器

$(".picker .pick:eq(0)").toggleClass('show');

或者通过穿越

$(".picker .pick").eq(0).toggleClass('show')

或者您可以使用
find
属性并搜索类
pick

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

或使用
过滤器
功能

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

使用
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');
});


$（函数（）{
$（'.picker.container header'）。单击（函数（）{
$（this.toggleClass（'减号'）。next（'.pick'）。toggleClass（'show'）；
});
});
.picker{
显示：内联块；
垂直对齐：顶部；
}
皮克先生{
/*宽度：20%*/
右边距：10px；
}
.采摘器.容器{
宽度：100%；
}
.picker.容器标题{
颜色：#fff；
背景色：#000；
填充：10px；
过渡期：放松；
文本转换：大写；
字体大小：粗体；
边缘底部：10px；
光标：指针；
}
.picker.container header.减：之后，
.选择器.容器标题：后{
字体系列：Fontsome；
左边距：10px；
}
.选择器.容器标题：后{
内容：“\f055”；
}
.选择器.容器标题.减：后{
内容：“\f056”；
}
.拾音器，拾音器{
显示：无；
}

建立自己的网站：
选择您的菜单样式：

固定顶部
静态顶部导航栏
静态导航栏

选择你的英雄风格：

背景GIF
背景视频
固定宽度
Jumbotron
滑块

选择您的布局：

杂志
2产品
3产品
4产品

试试这个：

$('.picker .container header').click(function() {
    var $this = $(this);
    var $pick = $('.pick', $this.parent());
    $pick.toggleClass('show');
    $this.toggleClass('minus');
});

如果不在单击函数中使用find，这可能会稍微好一些。您只需要使用
$（This）
来获取单击的元素，并使用
not（$（This））
从第二个选择中排除它

这是您需要的代码：

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


$（'.picker.container header'）。单击（函数（）{
log（$（this））；
$（this.toggleClass（'show'）；
$（'.picker.container header'）。而不是（$（this））。toggleClass（'减号'）；
});
.picker{
显示：内联块；
垂直对齐：顶部；
}
皮克先生{
宽度：20%；
右边距：10px；
}
.采摘器.容器{
宽度：100%；
}
.picker.容器标题{
颜色：#fff；
背景色：#000；
填充：10px；
过渡期：放松；
文本转换：大写；
字体大小：粗体；
边缘底部：10px；
光标：指针；
}
.picker.container header.减：之后，
皮克先生
$('.picker .container header').click(function() {
      $(this).toggleClass('show');
      $('.picker .container header').not($(this)).toggleClass('minus');
});