Jquery 将数据属性用于切换链接

我对jquery非常陌生。如何使用

data

属性进行切换

我想选择具有

class=“filter group”

和与按钮相同的

数据切换属性的元素：

$('button').click(function() {
  var toggleID = $(this).data('toggle');
  $('.filter-group[data-toggle= toggleID ]').toggle();
});

您的问题在这一行：

$('.filter-group[data-toggle= toggleID ]').toggle();

将其更改为：

$('.filter-group[data-toggle=' + toggleID + ']').toggle();


$（“.filter group”）.hide（）；
$（“按钮”）。单击（函数（）{
var toggleID=$（this.data（'toggle'）；
$（'.filter组[data toggle='+toggleID+']'）。toggle（）；
});
*{
保证金：0；
填充：0；
框大小：边框框；
字体大小：1.3rem；
}
钮扣{
填充：1rem；
背景颜色：鲑鱼；
边界：无；
}
.过滤器组{
背景颜色：银色；
填充：1rem；
}

按钮1
按钮2
过滤器组1
过滤器组2
您也可以这样做。根据按钮属性定义类名

<button type="button" data-toggle="toggle1">Button 1</button>
<button type="button" data-toggle="toggle2">Button 2</button>

<div class="filter-group toggle1" data-toggle="toggle1">
  Filter Group 1
</div>

<div class="filter-group toggle2" data-toggle="toggle2">
 Filter Group 2
</div>

谢谢，我想避免在这里上课。在这种情况下，stiles将有很多课程。所以我认为数据属性更清晰。
$(".filter-group").hide();
$('button').click(function() {
var toggleID = $(this).attr('data-toggle');
 $("."+toggleID).toggle();
});