Question

我试图将数据属性设置为由12个按钮映射的12个元素，因此<button data-id="_id01">将显示<div data-id="_id01">，

我正在尝试选择$('.button').data('id').click(function() { console.log('this is the button' + data.id); })之类的按钮

按钮和div将接收相同的数据，因此，当我单击btn 01时，它将切换div01，依此类推。

我应该如何在jQuery中引用它？

Answer 1

如果您想知道如何使用data-id来匹配元素，可以将它们与查找器或过滤器一起使用。

下面是一个如何匹配它们并仅显示相关元素的小例子。

$('button').on('click', function(e){
  $('.showMe') //find all the elements to possibly show
    .hide() //reset them to be hidden
    .filter('[data-id="'+ $(e.target).data('id') +'"]') //find the one that should show
    .show(); //show it
});

.showMe { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="_id01">Button 1</button>
<button data-id="_id02">Button 2</button>
<button data-id="_id03">Button 3</button>
<button data-id="_id04">Button 4</button>

<div class="showMe" data-id="_id01">Display 1</div>
<div class="showMe" data-id="_id02">Display 2</div>
<div class="showMe" data-id="_id03">Display 3</div>
<div class="showMe" data-id="_id04">Display 4</div>

将按钮的数据属性绑定到div

1 个答案: