在 jQuery 中選擇特定的 class

Question

我正在嘗試過濾不同的帖子有點頁面。 每個帖子都有許多不同的類別。 但是搜索過濾器是兩層的，主過濾器，然后是我使用復選框的更具體的過濾器選擇。 問題是所有類別都處於同一水平。 如何根據用戶過濾器輸入訪問每個選定的 class 然后 output 正確的帖子？

類別及其類如下所示：

    <span class="category">
        <span class="cat Event">Event</span>
        <span class="cat Developing">Developing</span>
        <span class="cat SQL">SQL</span>
      </span> 

Where "Event" is in the main filter and the other two are in the second checkbox filter

該項目在 MVC .NET 中完成，對於過濾功能，我使用的是 jQuery

這是在我看來如何獲取每個帖子的方法：

 <div class="novice-list">
        @foreach (var item in Model.Articles)
        {
            <div class="novica-container">
                <a href="@DataContext.Current.RouteUrlManager.GetModuleLink("article", null, "details", item.Id, item.Title)">
                    <div class="media">
                        @{
                            string slika = string.Empty;
                            if (item.Id > 166 || item.Id == 159)
                            {
                                slika = $"{WellKnownStrings.StorageBaseUrl}{WellKnownStrings.ArticleImageContainer}/{item.FeaturedImage}";
                            }
                            else
                            {
                                slika = item.FeaturedImageUrl;
                            }
                        }
                        <div class="slika" style="background-image: url('@if (item.FeaturedImageUrl != "") { @slika }');">
                        </div>
                        <div class="media-body">
                            @*<a href="#">content</a>*@
                            <div class="meta">
                                <span class="published">@item.DateFormated</span>
                                <span class="category">
                                    @foreach (var cat in @item.Category)
                                    {
                                        <span class="cat @cat.Title">@cat.Title</span>
                                    }
                                </span>
                            </div>
                            <h2>@item.Title</h2>
                            <p>@item.Summary</p>
                        </div>
                    </div>
                </a>
            </div>
        }
    </div>

這就是我從第一個（主要）過濾中獲得匹配的方式：

                isCheckedMain = true;
              
                if (isCheckedMain) {
                    var selectedClass = $(this).attr('class');


                    // reset the active class on all the buttons
                    $('#filterOptions li').removeClass('show');
                    // update the active state on our clicked button
                    $(this).parent().addClass('show');

                    if (selectedClass == 'all') {
                        // show all our items
                        $('.novica-container').slideDown(1000, "linear");
                    }
                    else {
                        // hide all elements that don't share ourClass
                        $('.novica-container').hide();
                        // show all elements that do share ourClass
                        $('.novica-container').find('span.cat.' + selectedClass).parents('.novica-container').slideDown(1000, "linear");
                    }

                }

並匹配復選框過濾器：

     $(".checkbox-filter :checkbox").click(function () {
    
    
        isBoxChecked = true;
        if (isCheckedMain && isBoxChecked) {
    
var selectedBox = $(this).attr('id');
var selectedMain = selectedClass;
  
        if ($('input#' + selectedBox).is(':checked')) {
        if ($('span.cat').hasClass(selectedMain)) {
            $('.novica-container').hide();
            $('span.cat.'+selectedMain).addClass(selectedBox);               
                                    
           $('.checkbox-filter :checkbox:checked').each(function () {
                    //Get the selected checkbox value  
      var selectedBox = $(this).attr('id');
   $('.novica-container').find('span.cat.' + selectedMain  ,'.'+selectedBox).parents('.novica-container').slideDown(700);
                                       
  });
   } 
    }
       else if ($(this).is(':not(checked')) {
               $('.novica-container').find('span.cat.' + selectedBox).parents('.novica-container').slideUp(700);
    
      if (($('input[type="checkbox"]:checked').length === 0)) {
                      isBoxChecked = false;
            $('.novica-container').slideDown(1000, "linear");

這就是我到目前為止所擁有的，我正在嘗試用真假做一些事情（如果一個是真的，只用主過濾器搜索，如果兩者都是真的用其他類別更准確地搜索。我一直被困在這里幾天來試圖合並代碼的兩邊。它們都單獨工作，但不能一起工作

過濾器圖片

Answer 1

找到了解決方案。

我在View中添加了所有類別名稱更高一級。 因此 class="category" 現在具有所有其他類別的值。

示例：class="category 事件開發 SQL"

然后我可以使用這個 jQuery 過濾選定的帖子

 $('span.category.' + selectedMain + '.' + selectedBox).parents('.novica-container').slideDown(700);