在 jQuery 中选择一个特定的类

Posted 2023-04-13

【中文标题】在 jQuery 中选择一个特定的类

【英文标题】：Selecting a specific class in jQuery

【发布时间】：2021-08-13 13:50:05

【问题描述】：

我正在尝试过滤不同的帖子有点像页面。每个帖子都有许多不同的类别。但是搜索过滤器是两层的，主过滤器，然后是我使用复选框的更具体的过滤器选择。问题是所有类别都处于同一水平。如何根据用户过滤器输入访问每个选定的类，然后输出正确的帖子？

类别及其类如下所示：

    <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.StorageBaseUrlWellKnownStrings.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");

这就是我到目前为止所拥有的，我正在尝试用真假做一些事情（如果一个是真的，只用主过滤器搜索，如果两者都是真的用其他类别更准确地搜索。我已经被困在这里好几天试图合并代码的两边。它们都分开工作，但不能一起工作

Picture of filter

【问题讨论】：

你不能从过滤器中选择的值构建选择器吗？如果没有看到更多的 html 和您编写 JS 的尝试，由于缺乏上下文，这将很难为您提供帮助。

欢迎来到***！请在 minimal reproducable example 中添加更多详细信息，例如 html 和 css，最多在 stack snippet 中添加。见how to ask

我尝试在特定类别上添加一个类，这样我就可以只使用一个类来呈现帖子，如下所示：class="cat Event Developing SQL"，但这会在每个帖子上添加类容器，使每个过滤都成为真。我会用一些代码更新我的问题

【参考方案1】：

找到了解决方案。

我在我的视图中添加了上一级的所有类别名称。这样 class="category" 现在就有了所有其他类别的值。

示例：class="category Event Developing SQL"

然后我可以使用这个 jQuery 过滤选定的帖子

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