使用数据属性进行切换 link

Question

我是 jquery 的新手。如何使用 data 属性进行切换？

我想要 select 具有 class="filter-group" 和相同 data-toggle 属性的元素，例如按钮具有的属性：

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

https://codepen.io/elkeschiffer/pen/PWZKmE

Answer 1

您的问题在这一行：

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

改为：

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

$(".filter-group").hide();

$('button').click(function() {

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

});

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-size:1.3rem;
}

button {
    padding:1rem;
    background-color:salmon;
    border:none;
}

.filter-group {
    background-color:silver;
    padding:1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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


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

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

Answer 2

您也可以这样做 way.Define class name as per button attr

<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>

这样改变你的js。

$(".filter-group").hide();
$('button').click(function() {
var toggleID = $(this).attr('data-toggle');
 $("."+toggleID).toggle();
});

使用数据属性进行切换 link

Use data-attribute for toggle link

jquery

custom-data-attribute