Question

所以我有一个div的列表，每个都附有几个类（mon thurs s1 s2 dance sing voice ect。）我想设置一个过滤系统，允许用户选择一个类并隐藏其他类。选择多个类并显示所选内容会很棒。

我的HTML

    $('.actBtn').click(function(){
  // change btn color

    $('#actBtn').removeClass('actBtn').addClass('btnSelect');
   // hide other classes    

      if($('.sing ,.tech ,.dance').hasClass('hidden')){
   $('.sing ,.tech ,.dance').removeClass('hidden');}
    else {$('.sing ,.tech ,.dance').addClass('hidden');}
  });
  $('.voiceBtn').click(function(){
        // change btn color
      $('#voiceBtn').removeClass('voiceBtn').addClass('btnSelect');
// hide other classes       
       $('.acting ,.tech ,.dance').addClass('hidden');
});
$('.danceBtn').click(function(){
    // change btn color
       $('#danceBtn').removeClass('danceBtn').addClass('btnSelect');
// hide other classes       
      $('.sing ,.tech ,.acting').addClass('hidden');
});
$('.tchBtn').click(function(){
    // change btn color
      $('#tchBtn').removeClass('tchBtn').addClass('btnSelect');
// hide other classes       
      $('.sing ,.acting ,.dance').addClass('hidden');
});
$('.s1Btn').click(function(){
// change btn color
      $('#s1Btn').removeClass('s1Btn').addClass('btnSelect');
// hide other classes       
       $('.s2').addClass('hidden');
});
$('.s2Btn').click(function(){
    // change btn color
      $('#s2Btn').removeClass('s2Btn').addClass('btnSelect');
// hide other classes       
      $('.s1').addClass('hidden');
});
$('.monBtn').click(function(){
    // change btn color
      $('#monBtn').removeClass('monBtn').addClass('btnSelect');
// hide other classes       
       if($('.thurs').hasClass('hidden')){
       $('.thurs').removeClass('hidden');}
    else {$('.thurs').addClass('hidden');}
});
$('.thursBtn').click(function(){
// change btn color
       $('#thursBtn').removeClass('thursBtn').addClass('btnSelect');
// hide other classes       
      $('.mon').addClass('hidden');
    });
 $('.g2-6Btn').click(function(){
// change btn color
      $('#g2-6Btn').removeClass('g2-6Btn').addClass('btnSelect');
// hide other classes       
      $('.g7-12').addClass('hidden');
    });
$('.g7-12Btn').click(function(){
 // change btn color
      $('#g7-12Btn').removeClass('g7-12Btn').addClass('btnSelect');
 // hide other classes      
     $('.g2-6').addClass('hidden');
    });

Jquery

$('#clearBtn').click(function () {
if($('#thursBtn').hasClass('btnSelect')){
       $('#thursBtn').removeClass('btnSelect').addClass('thursBtn');}


if($('#monBtn').hasClass('btnSelect')){
       $('#monBtn').removeClass('btnSelect').addClass('monBtn');}

if($('#actBtn').hasClass('btnSelect')){
       $('#actBtn').removeClass('btnSelect').addClass('actBtn');}

if($('#voiceBtn').hasClass('btnSelect')){
       $('#voiceBtn').removeClass('btnSelect').addClass('voiceBtn');}

if($('#danceBtn').hasClass('btnSelect')){
       $('#danceBtn').removeClass('btnSelect').addClass('danceBtn');}

if($('#tchBtn').hasClass('btnSelect')){
       $('#tchBtn').removeClass('btnSelect').addClass('tchBtn');}

if($('#s1Btn').hasClass('btnSelect')){
       $('#s1Btn').removeClass('btnSelect').addClass('s1Btn');}

if($('#s2Btn').hasClass('btnSelect')){
       $('#s2Btn').removeClass('btnSelect').addClass('s2Btn');}

    if ($('.acting').hasClass('hidden')) {
    $('.acting').removeClass('hidden');
} 
    if ($('.sing').hasClass('hidden')) {
    $('.sing').removeClass('hidden');
} 
    if ($('.s1').hasClass('hidden')) {
    $('.s1').removeClass('hidden');
} 
    if ($('.s2').hasClass('hidden')) {
    $('.s2').removeClass('hidden');
} 
    if ($('.tech').hasClass('hidden')) {
    $('.tech').removeClass('hidden');
} 
    if ($('.dance').hasClass('hidden')) {
    $('.dance').removeClass('hidden');
} 
    if ($('.mon').hasClass('hidden')) {
    $('.mon').removeClass('hidden');
} 
    if ($('.thurs').hasClass('hidden')) {
    $('.thurs').removeClass('hidden');
} 
    if ($('.g2-6').hasClass('hidden')) {
    $('.g2-6').removeClass('hidden');
} 
    if ($('.g7-12').hasClass('hidden')) {
    $('.g7-12').removeClass('hidden');
} 
});

//清除Buttong功能

__init__.py

Answer 1

如果我理解正确，你想要的是当你点击特定过滤器的按钮时，它会显示/隐藏具有该类的div，对吗？

考虑到你想要的东西，注意你想要对每个按钮做同样的事情，唯一改变的是每个过滤器受影响的类列表，所以为了简化代码，我们真正需要一个点击与所有按钮相关联的功能，在该功能内部我们将获得该列表。

我的方法是首先创建一个具有每个按钮和类列表之间关系的对象......

var relations = {
    actBtn: ['sing','tech','dance'],
    voiceBtn: ['acting','tech','dance'],
    danceBtn: ['sing','tech','acting'],
    tchBtn: ['sing','acting','dance'],
    ...
};

...我已经将每个过滤器的代码用作您当前正在使用的ID。有了这个，您只需创建一个函数来处理所有按钮......

$('button').not('#clearBtn,#filterBtn').click(function() {

    // Change button color.
    $(this).toggleClass($(this).attr('id')+' btnSelect');

    if ($('button.btnSelect').length > 0) {

        // Hide all divs
        $('div.class').hide();

        // Show divs of all active filters.
        $('button.btnSelect').each(function() {
            $('.'+relations[$(this).attr('id')].join(',.')).show();
        });
    }
    else {
        $('div.class').show();
    }
});

正如您所看到的，使用这种方法可以大大减少代码。用于显示/隐藏行为。考虑到您希望能够同时激活多个过滤器，并且它们可以共享一个或多个类，我所做的就是每当您点击过滤器时，首先隐藏所有div，然后检查所有活动过滤器以显示他们相应的类，所以你不必维持任何状态。

对于清除按钮......

$('button#clearBtn').click(function() {

    // Deactivate all buttons.
    $('button').removeClass('btnSelect').each(function() {
        if (!$(this).hasClass($(this).attr('id')))
            $(this).addClass($(this).attr('id'));
    });

    // Show all div's.
    $('.'+filters.join(',.')).show();
});

我不明白为什么你点击它时添加/删除按钮类（事实上，我没有看到该类的重点，你已经拥有了具有相同值的id），我已经完成它是因为你拥有它并且它可能有其他关系，但我只需添加/删除btnSelect类来指示是否选择了按钮。我也没有看到Filter按钮的重点。我认为你不需要这种方法。

并且很容易修改以使其适应您的偏好，因为您只处理一个功能。

我希望它有所帮助

使用类对多个div进行排序

1 个答案: