分組和存儲HTML'數據'屬性

我正在爲WordPress中的自定義後期類型構建ajax過濾器。我有類似的這種定位的標籤列表：分組和存儲HTML'數據'屬性

<a href="" class="selected" data-group="1" data-filter="filter-1">Filter 1</a> 
<a href="" class="selected" data-group="1" data-filter="filter-2">Filter 2</a> 
<a href="" class="selected" data-group="2" data-filter="filter-3">Filter 3</a> 
<a href="" class="" data-group="2" data-filter="filter-4">Filter 4</a> 
<a href="" class="selected" data-group="2" data-filter="filter-5">Filter 5</a> 
<a href="" class="selected" data-group="2" data-filter="filter-6">Filter 6</a>

所以，當用戶點擊我申請「選擇」到標籤類，使用下面的代碼標籤：

(function($) { 
    function build_filter() { 
     f = $(".filter a.selected").map(function() { 
      return $(this).data('filter'); 
     }) 
     .get() 
     .join(); 
     return f; 
    } 

    $(document).on('click', '.filter a', function(event) { 

     event.preventDefault(); 

     // toggle if selected 
     $(this).toggleClass('selected'); 
     // get the filter(s) 
     filter = build_filter(); 

     $.ajax({ 
      url: ajaxfilter.ajaxurl, 
      type: 'post', 
      data: { 
       action: 'ajax_filter', 
       filter: filter 
      }, 
      success: function (html) { 
       $('.product.gallery').empty(); 
       $('.product.gallery').append(html); 
      } 
     }) 
    }) 
})(jQuery);

然後我選擇已使用build_filter函數「選中」的所有定位標記。最後，我想創建一個陣列組中的所有的「數據過濾器的透過其各自的‘數據組’我知道它涉及到循環的

$(".filter a.selected").map();

的內容，但我不能讓我的頭周圍，任何幫助將不勝感激

來源

2016-09-14 pricey_zeal

可你只有1個論壇已在其選擇的時間？ – guradio

你是非常接近，只是你的價值組的數據組屬性。我已經改變了你的build_filter函數。請檢查，如果有任何問題，請讓我知道。

$(document).ready(function(){ 
 
(function($) { 
 
    function build_filter() { 
 
    var obj={}; 
 
    f = $(".filter a.selected").each(function() { 
 
    obj[$(this).data('group')]= 
 
     function(datagroup){ 
 
     var t=[]; 
 
      $(".filter a.selected").each(function() { 
 
      if($(this).data('group')==datagroup)t.push($(this).data('filter')); 
 
      }); 
 
      return t; 
 
     }($(this).data('group')); 
 
      
 
    
 
    }); 
 
    return obj; 
 
    } 
 
    $(document).on('click', '.filter a', function(event) { 
 
    event.preventDefault(); 
 
    // toggle if selected 
 
    // $(this).toggleClass('selected'); 
 
    // get the filter(s) 
 
    filter = build_filter(); 
 
console.log(filter); 
 
    }) 
 
})(jQuery); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<span class="filter"> 
 
<a href="#" class="selected" data-group="1" data-filter="filter-1">Filter 1</a> 
 
<a href="#" class="selected" data-group="1" data-filter="filter-2">Filter 2</a> 
 
<a href="#" class="selected" data-group="2" data-filter="filter-3">Filter 3</a> 
 
<a href="#" class="" data-group="2" data-filter="filter-4">Filter 4</a> 
 
<a href="#" class="selected" data-group="2" data-filter="filter-5">Filter 5</a> 
 
<a href="#" class="selected" data-group="2" data-filter="filter-6">Filter 6</a> 
 
</span> 
 
</body> 
 
</html>

來源

2016-09-14 12:28:08 localhost

這太棒了 - 謝謝localhost：] –

不客氣，我們在這裏互相幫助。 :) – localhost

分組和存儲HTML'數據'屬性

回答

相關問題