javascript - JS/jQuery - 在每个()函数中扩展 Var

Question

我有两个采用这种格式的列表:

<ul id="filters" class="option-set button-group" data-filter-group="kategorie">
    <li>
        <a href="#" data-filter=".corporatedesign">Corporate Design</a>
    </li>
    <li>
        <a href="#" data-filter=".webdesign">Webdesign</a>
    </li>
</ul>

在 Javascript 中有一个点击函数，可以向链接元素添加或删除“isotopeactive”类:

$('#filters a').click(function(){
    var $this = $(this);                
    if ( $this.hasClass('isotopeactive') ) {
        $this.removeClass('isotopeactive');
    }else{
        $this.addClass('isotopeactive');
    }

问题是获取所有数据过滤器 - 来自“同位素 active ”的所有元素的数据到一个变量中。我的第一次尝试是这样的，但它不起作用..

var filterValue = '';
var i = 0;  

$( ".isotopeactive" ).each(function() {
    filterValue += $this.attr('data-filter');
    i++;
});

最后我想要得到这样的东西: filterValue =>“.corporatedesign .webdesign”

有什么建议吗？谢谢! :)

Answer 1

我建议:

var data = $('.isotopeactive').map(function(){
             return this.dataset.filter;
           }).get();

对于那些未实现数据集的旧浏览器:

var data = $('.isotopeactive').map(function(){
             return this.getAttribute('data-filter');
           }).get();

或者:

var data = $('.isotopeactive').map(function(){
             return $(this).data('filter');
           }).get();

这将向 data 变量返回一个值数组。

引用文献:

JavaScript:
• Element.getAttribute() .
• HTMLElement.dataset .
• jQuery:
  • data() .
  • get() .
  • map() .